/* ============================================================================================= CampusMe theme, on Bootstrap 4 / AdminLTE 3. Loaded AFTER adminlte.min.css on every page. It overrides Bootstrap 4 / AdminLTE 3 and adds the small cm-* kit the screens are built from. Every colour, size and radius is a token below: when the design is revised, change the tokens first - most screens follow without being touched. Fonts are self-hosted (IBM Plex, OFL - fonts/ibm-plex/OFL.txt). Nothing loads from a CDN. ============================================================================================= */ /* ---- fonts ---------------------------------------------------------------------------------- */ @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex/ibm-plex-sans-latin-400-normal.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; } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex/ibm-plex-sans-latin-ext-400-normal.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex/ibm-plex-sans-latin-400-italic.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex/ibm-plex-sans-latin-500-normal.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; } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex/ibm-plex-sans-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex/ibm-plex-sans-latin-600-normal.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; } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex/ibm-plex-sans-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/ibm-plex/ibm-plex-sans-latin-700-normal.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; } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/ibm-plex/ibm-plex-sans-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); } /* ---- tokens (design page 03) ------------------------------------------------------------------ */ :root { --cm-navy: #0F1F3A; --cm-navy-2: #16294A; /* sidebar hover */ --cm-navy-700: #1D3560; --cm-navy-3: #22375C; /* sidebar borders */ --cm-brass: #D4B572; --cm-brass-700: #8A6A2F; /* brass text on white */ --cm-brass-50: #FBF6EA; --cm-text: #101828; --cm-text-2: #475467; --cm-text-3: #667085; /* hints */ --cm-primary: #2350C8; --cm-primary-600: #1C41A6; --cm-primary-50: #EEF2FC; --cm-primary-100: #DBE4F9; --cm-border: #E4E7EC; --cm-border-2: #D0D5DD; /* control borders */ --cm-border-strong: #D0D5DD; --cm-border-card: #E1E6EE; --cm-bg: #EEF1F6; --cm-surface: #FFFFFF; --cm-surface-2: #F9FAFB; /* table header, quiet fills */ --cm-success: #157F52; --cm-success-50: #E8F5EE; --cm-warning: #A15C07; --cm-warning-50: #FDF3E3; --cm-warning-icon: #DC8A12; --cm-danger: #B42323; --cm-danger-50: #FDECEC; --cm-info: #2350C8; --cm-info-50: #EEF3FC; --cm-neutral: #475467; --cm-neutral-50: #F2F4F7; --cm-purple: #6937C8; --cm-purple-50: #F3EFFC; --cm-font: "IBM Plex Sans", "Noto Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; --cm-mono: "IBM Plex Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --cm-r-control: 6px; --cm-r-card: 10px; --cm-r-pill: 999px; --cm-shadow-card: 0 1px 2px rgba(15,31,58,.05), 0 4px 12px -6px rgba(15,31,58,.08); --cm-shadow-modal: 0 24px 48px rgba(15,31,58,.25); --cm-sidebar: 232px; --cm-gutter: 28px; --cm-gap: 20px; --cm-topbar: 56px; } /* ---- base ----------------------------------------------------------------------------------- */ html { font-size: 16px; } body { font-family: var(--cm-font); font-size: 14px; line-height: 1.5; color: var(--cm-text); background: var(--cm-bg); -webkit-font-smoothing: antialiased; font-feature-settings: "tnum" 0; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--cm-font); color: var(--cm-text); font-weight: 600; letter-spacing: -.01em; } h1, .h1 { font-size: 24px; letter-spacing: -.015em; } h2, .h2 { font-size: 20px; } h3, .h3 { font-size: 18px; } h4, .h4 { font-size: 16px; } h5, .h5 { font-size: 15px; } h6, .h6 { font-size: 14px; } a { color: var(--cm-primary); } a:hover { color: var(--cm-primary-600); } small, .small { font-size: 12.5px; } .text-muted { color: var(--cm-text-3) !important; } .text-primary { color: var(--cm-primary) !important; } .text-success { color: var(--cm-success) !important; } .text-warning { color: var(--cm-warning) !important; } .text-danger { color: var(--cm-danger) !important; } .text-info { color: var(--cm-info) !important; } .text-secondary { color: var(--cm-text-2) !important; } .bg-light { background: var(--cm-surface-2) !important; } code, kbd, pre, samp, .cm-code, .ecg-mono { font-family: var(--cm-mono); } code { color: var(--cm-text); background: var(--cm-neutral-50); padding: 1px 5px; border-radius: 4px; font-size: 12.5px; } .cm-num, .table td.num, .table th.num { font-variant-numeric: tabular-nums; } .table, .cm-stat-value, .progress, .badge { font-variant-numeric: tabular-nums; } hr { border-top-color: var(--cm-border); } ::selection { background: var(--cm-primary-100); } /* overline: 11 / 600 / +7% */ .cm-overline { display: block; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--cm-text-3); } .cm-overline.brass { color: var(--cm-brass-700); } .cm-hint { font-size: 12.5px; color: var(--cm-text-3); } /* ---- layout: content area ----------------------------------------------------------------- */ .content-wrapper { background: var(--cm-bg); } .content-wrapper > .content-header { padding: 24px var(--cm-gutter) 8px; } .content-wrapper > .content { padding: 0 var(--cm-gutter) var(--cm-gutter); } .content-wrapper > .content > .container-fluid, .content-header > .container-fluid { padding-left: 0; padding-right: 0; } .content-header h1 { font-size: 24px; font-weight: 600; margin: 0; } .content-header .breadcrumb { background: transparent; font-size: 12.5px; } @media (max-width: 767px) { :root { --cm-gutter: 16px; } } /* page header: title + subtitle left, actions right */ .cm-page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; margin: 0 0 20px; } .cm-page-header .cm-page-title { font-size: 24px; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; margin: 0; } .cm-page-header .cm-page-sub { color: var(--cm-text-2); margin: 4px 0 0; font-size: 14px; } .cm-page-header .cm-page-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .cm-page-header .cm-page-actions form { display: inline-flex; margin: 0; } .cm-page-title .badge, .cm-page-title .cm-badge { vertical-align: middle; margin-left: 8px; font-size: 12px; } /* ---- topbar (56px) -------------------------------------------------------------------------- */ .main-header.navbar { min-height: var(--cm-topbar); background: var(--cm-surface) !important; border-bottom: 1px solid var(--cm-border) !important; padding: 0 16px 0 8px; box-shadow: none; } .main-header .nav-link { color: var(--cm-text-2); height: var(--cm-topbar); display: flex; align-items: center; } .main-header .nav-link:hover { color: var(--cm-text); } .cm-crumbs { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--cm-text-3); margin: 0 0 0 4px; padding: 0; list-style: none; white-space: nowrap; overflow: hidden; } .cm-crumbs li { display: inline-flex; align-items: center; } .cm-crumbs li + li::before { content: "\f054"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 8px; color: var(--cm-border-2); margin-right: 6px; } .cm-crumbs a { color: var(--cm-text-3); } .cm-crumbs a:hover { color: var(--cm-text); } .cm-crumbs li:last-child { color: var(--cm-text); font-weight: 500; } .cm-topbar-context { display: flex; align-items: center; gap: 10px; } .cm-topbar-context .form-control, .cm-topbar-context .custom-select { height: 32px; font-size: 13px; } .cm-session-pick { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--cm-border-2); border-radius: var(--cm-r-control); padding: 0 4px 0 10px; height: 32px; font-size: 13px; background: #fff; } .cm-session-pick label { margin: 0; color: var(--cm-text-3); font-weight: 400; } .cm-session-pick select { border: 0; background: transparent; font-weight: 600; color: var(--cm-text); height: 30px; padding: 0 4px; outline: none; } .cm-help { color: var(--cm-text-3); font-size: 16px; } .cm-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--cm-text-2); } .cm-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cm-success); box-shadow: 0 0 0 3px var(--cm-success-50); } /* ---- sidebar (navy, brass accents) --------------------------------------------------------- */ .main-sidebar, .main-sidebar.sidebar-dark-primary { background: var(--cm-navy) !important; box-shadow: none !important; border-right: 1px solid var(--cm-navy); } .main-sidebar .brand-link { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 14px 16px; border-bottom: 1px solid var(--cm-navy-3) !important; color: #fff; text-align: left; white-space: normal; } .main-sidebar .brand-link:hover { color: #fff; } .cm-brand-tile { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 8px; background: #fff; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: 0 0 0 2px var(--cm-brass); } .cm-brand-tile img { max-width: 30px; max-height: 30px; object-fit: contain; } .cm-brand-tile i, .cm-brand-tile span { color: var(--cm-navy); font-weight: 700; font-size: 14px; } .cm-brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; } .cm-brand-text b { font-size: 13px; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .cm-brand-text small { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--cm-brass); font-weight: 600; margin-top: 2px; } .sidebar-collapse .cm-brand-text { display: none; } .main-sidebar .sidebar { padding: 0 10px; display: flex; flex-direction: column; height: calc(100% - 64px); overflow-y: auto; } .main-sidebar .sidebar > nav { flex: 1 1 auto; } /* module switcher */ .cm-module-switch { margin: 12px 0 6px; position: relative; } .cm-module-switch > button, .cm-module-switch > .cm-module-current { width: 100%; display: flex; align-items: center; gap: 8px; background: var(--cm-navy-2); border: 1px solid var(--cm-navy-3); color: #fff; border-radius: 8px; height: 36px; padding: 0 10px; font-size: 13px; font-weight: 600; text-align: left; } .cm-module-switch > button:focus { outline: none; box-shadow: 0 0 0 2px rgba(212, 181, 114, .45); } .cm-module-switch i.cm-mod-icon { color: var(--cm-brass); width: 16px; text-align: center; } .cm-module-switch .cm-caret { margin-left: auto; font-size: 10px; color: rgba(255,255,255,.55); } .cm-module-switch .dropdown-menu { width: 100%; min-width: 0; border-radius: 8px; padding: 4px; } .cm-module-switch .dropdown-item { border-radius: 6px; font-size: 13px; padding: 7px 10px; } .cm-module-switch .dropdown-item i { width: 18px; color: var(--cm-text-3); } .cm-module-switch .dropdown-item.active, .cm-module-switch .dropdown-item:active { background: var(--cm-primary-50); color: var(--cm-primary); } .sidebar-collapse .main-sidebar:not(:hover) .cm-module-switch .cm-mod-label, .sidebar-collapse .main-sidebar:not(:hover) .cm-module-switch .cm-caret { display: none; } /* navigation */ .nav-sidebar { padding-bottom: 12px; } .nav-sidebar .nav-header { font-size: 10.5px !important; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.42) !important; padding: 16px 10px 6px !important; background: transparent !important; } .nav-sidebar > .nav-item { margin-bottom: 1px; } .nav-sidebar .nav-link { color: rgba(255,255,255,.74) !important; border-radius: 6px !important; padding: 7px 10px !important; font-size: 13.5px; display: flex; align-items: center; } .nav-sidebar .nav-link p { margin: 0; white-space: nowrap; } .nav-sidebar .nav-link .nav-icon { font-size: 13px !important; width: 18px !important; margin-right: 10px !important; color: rgba(255,255,255,.55); text-align: center; } .nav-sidebar .nav-link:hover { background: var(--cm-navy-2) !important; color: #fff !important; } .nav-sidebar .nav-link.active, .sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active { background: var(--cm-navy-2) !important; color: #fff !important; box-shadow: inset 2px 0 0 var(--cm-brass) !important; font-weight: 600; } .nav-sidebar .nav-link.active .nav-icon { color: var(--cm-brass); } .nav-sidebar .nav-treeview .nav-link { padding-left: 28px !important; } .nav-sidebar .nav-link .right { margin-left: auto; position: static !important; font-size: 10px; opacity: .6; } .nav-sidebar .nav-link.text-muted, .nav-sidebar span.nav-link { color: rgba(255,255,255,.5) !important; } .nav-sidebar .nav-link small { margin-left: auto; font-size: 11px; color: rgba(255,255,255,.45); } /* signed-in user at the foot */ .cm-sidebar-user { border-top: 1px solid var(--cm-navy-3); margin: 0 -10px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; position: sticky; bottom: 0; background: var(--cm-navy); } .cm-sidebar-user .cm-avatar { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: var(--cm-brass); color: var(--cm-navy); display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; text-transform: uppercase; } .cm-sidebar-user .cm-user-text { min-width: 0; line-height: 1.25; flex: 1 1 auto; } .cm-sidebar-user .cm-user-text b { display: block; color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cm-sidebar-user .cm-user-text small { color: rgba(255,255,255,.5); font-size: 11px; font-family: var(--cm-mono); } .cm-sidebar-user .dropdown > a, .cm-sidebar-user button.cm-user-menu { color: rgba(255,255,255,.6); background: none; border: 0; padding: 4px 6px; border-radius: 6px; } .cm-sidebar-user .dropdown > a:hover, .cm-sidebar-user button.cm-user-menu:hover { color: #fff; background: var(--cm-navy-2); } .cm-sidebar-user .dropdown-menu { font-size: 13px; } .sidebar-collapse .main-sidebar:not(:hover) .cm-sidebar-user .cm-user-text, .sidebar-collapse .main-sidebar:not(:hover) .cm-sidebar-user .dropdown { display: none; } /* ---- cards ---------------------------------------------------------------------------------- */ .card { background: var(--cm-surface); border: 1px solid var(--cm-border-card); border-radius: var(--cm-r-card); box-shadow: var(--cm-shadow-card); margin-bottom: var(--cm-gap); } .card.card-outline, .card[class*="card-outline"] { border-top: 1px solid var(--cm-border) !important; } .card[class*="card-primary"]:not(.card-outline) > .card-header, .card[class*="card-info"]:not(.card-outline) > .card-header, .card[class*="card-success"]:not(.card-outline) > .card-header, .card[class*="card-warning"]:not(.card-outline) > .card-header, .card[class*="card-danger"]:not(.card-outline) > .card-header, .card[class*="card-secondary"]:not(.card-outline) > .card-header, .card[class*="card-dark"]:not(.card-outline) > .card-header { background: var(--cm-surface) !important; color: var(--cm-text) !important; } .card[class*="card-"]:not(.card-outline) > .card-header a:not(.btn) { color: var(--cm-primary); } .card[class*="card-"] > .card-header .btn-tool { color: var(--cm-text-3) !important; } .card-header { background: transparent; border-bottom: 1px solid var(--cm-border); padding: 14px 20px; } .card-header:first-child { border-radius: var(--cm-r-card) var(--cm-r-card) 0 0; } .card-title, .card-header h3, .card-header h4, .card-header h5 { font-size: 16px !important; font-weight: 600; color: var(--cm-text); margin: 0; } .card-header .card-title + .cm-card-sub, .cm-card-sub { display: block; font-size: 12.5px; color: var(--cm-text-3); font-weight: 400; margin-top: 2px; } .card-body { padding: 20px; } .card-footer { background: var(--cm-surface-2); border-top: 1px solid var(--cm-border); padding: 12px 20px; border-radius: 0 0 var(--cm-r-card) var(--cm-r-card) !important; } .card-header.cm-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .card-header.cm-card-head::after { display: none; } .card > .table, .card > .table-responsive > .table, .card-body.p-0 > .table, .card-body.p-0 > .table-responsive > .table { margin-bottom: 0; } .card.cm-flat { box-shadow: none; } .card.cm-dark { background: var(--cm-navy); border-color: var(--cm-navy); color: rgba(255,255,255,.82); } .card.cm-dark h1, .card.cm-dark h2, .card.cm-dark h3, .card.cm-dark h4, .card.cm-dark .card-title { color: #fff; } /* ---- stat tile (replaces AdminLTE small-box / info-box) ---------------------------------- */ .cm-stat { background: var(--cm-surface); border: 1px solid var(--cm-border-card); border-radius: var(--cm-r-card); box-shadow: var(--cm-shadow-card); padding: 16px 18px; height: 100%; display: flex; flex-direction: column; justify-content: space-between; min-height: 104px; } .cm-stat-label { font-size: 12.5px; color: var(--cm-text-2); font-weight: 500; } .cm-stat-value { font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; color: var(--cm-navy); margin-top: 6px; font-variant-numeric: tabular-nums; } .cm-stat-value small { font-size: 14px; color: var(--cm-text-3); font-weight: 500; letter-spacing: 0; } .cm-stat-meta { font-size: 12px; color: var(--cm-text-3); margin-top: 6px; } .cm-stat-meta.ok { color: var(--cm-success); } .cm-stat-meta.warn { color: var(--cm-warning); } .cm-stat-meta.bad { color: var(--cm-danger); } .cm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; margin-bottom: var(--cm-gap); } .cm-stats.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cm-stats.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 991px) { .cm-stats.cols-4, .cm-stats.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .cm-stats.cols-4, .cm-stats.cols-3 { grid-template-columns: 1fr 1fr; } .cm-stat-value { font-size: 24px; } } /* Legacy AdminLTE tiles on screens not yet rebuilt: neutral, label on top, no coloured slabs. */ .small-box { background: var(--cm-surface) !important; color: var(--cm-text) !important; border: 1px solid var(--cm-border); border-radius: var(--cm-r-card); box-shadow: var(--cm-shadow-card) !important; } .small-box > .inner { padding: 16px 18px; } .small-box > .inner h3 { font-size: 28px; font-weight: 600; color: var(--cm-text); font-variant-numeric: tabular-nums; } .small-box > .inner p { color: var(--cm-text-2); font-size: 13px; } .small-box .icon { display: none; } .small-box > .small-box-footer { background: var(--cm-surface-2) !important; color: var(--cm-primary) !important; border-top: 1px solid var(--cm-border); border-radius: 0 0 var(--cm-r-card) var(--cm-r-card); font-size: 12.5px; } .info-box { border: 1px solid var(--cm-border); border-radius: var(--cm-r-card); box-shadow: var(--cm-shadow-card); min-height: 84px; padding: 14px; } .info-box .info-box-icon { border-radius: 8px; width: 40px; height: 40px; font-size: 16px; align-self: center; background: var(--cm-neutral-50) !important; color: var(--cm-text-2) !important; box-shadow: none !important; } .info-box .info-box-text { font-size: 12.5px; color: var(--cm-text-2); text-transform: none; } .info-box .info-box-number { font-size: 22px; font-weight: 600; color: var(--cm-text); } .info-box[class*="bg-"] { background: var(--cm-surface) !important; color: var(--cm-text) !important; } .info-box[class*="bg-"] .progress { background: var(--cm-border); } .info-box[class*="bg-"] .progress .progress-bar { background: var(--cm-primary); } /* ---- buttons ------------------------------------------------------------------------------- */ .btn { font-family: var(--cm-font); font-weight: 600; font-size: 14px; border-radius: var(--cm-r-control); height: auto; min-height: 38px; padding: 8px 14px; line-height: 20px; box-shadow: none !important; transition: background-color .12s, border-color .12s, color .12s; } .btn-sm, .btn-group-sm > .btn { min-height: 32px; padding: 5px 10px; font-size: 13px; line-height: 20px; } .btn-xs { min-height: 26px; padding: 2px 8px; font-size: 12px; line-height: 20px; border-radius: 5px; } .btn-lg, .btn-group-lg > .btn { min-height: 48px; padding: 12px 20px; font-size: 16px; line-height: 22px; border-radius: 8px; } .btn:focus, .btn.focus { box-shadow: 0 0 0 3px rgba(35, 80, 200, .22) !important; } .btn-primary { background: var(--cm-primary); border-color: var(--cm-primary); color: #fff; } .btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active { background: var(--cm-primary-600); border-color: var(--cm-primary-600); color: #fff; } .btn-primary.disabled, .btn-primary:disabled { background: #93A8E4; border-color: #93A8E4; opacity: 1; } /* Secondary: white with a border. Coloured solid buttons collapse onto primary / secondary / destructive so a row never has green, red and blue side by side (principle 1). */ .btn-secondary, .btn-default, .btn-light, .btn-outline-secondary, .btn-outline-primary, .btn-outline-info, .btn-outline-dark, .btn-info, .btn-dark { background: var(--cm-surface); border: 1px solid var(--cm-border-2); color: var(--cm-text); } .btn-secondary:hover, .btn-default:hover, .btn-light:hover, .btn-outline-secondary:hover, .btn-outline-primary:hover, .btn-outline-info:hover, .btn-outline-dark:hover, .btn-info:hover, .btn-dark:hover, .btn-secondary:focus, .btn-default:focus, .btn-light:focus, .btn-outline-secondary:focus, .btn-outline-primary:focus, .btn-outline-info:focus, .btn-outline-dark:focus, .btn-info:focus, .btn-dark:focus, .btn-secondary:not(:disabled):not(.disabled):active, .btn-default:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled):active { background: var(--cm-surface-2); border-color: var(--cm-border-2); color: var(--cm-text); } .btn-outline-primary { color: var(--cm-primary); } .btn-secondary.active, .btn-outline-secondary.active, .btn-outline-primary.active, .btn-default.active { background: var(--cm-primary-50) !important; border-color: var(--cm-primary) !important; color: var(--cm-primary) !important; } .btn-success { background: var(--cm-success); border-color: var(--cm-success); color: #fff; } .btn-success:hover, .btn-success:focus, .btn-success:not(:disabled):not(.disabled):active { background: #106642; border-color: #106642; color: #fff; } .btn-outline-success { background: var(--cm-surface); border-color: var(--cm-border-2); color: var(--cm-success); } .btn-outline-success:hover { background: var(--cm-success-50); border-color: var(--cm-success); color: var(--cm-success); } .btn-warning { background: var(--cm-surface); border: 1px solid #F0C98A; color: var(--cm-warning); } .btn-warning:hover, .btn-warning:focus { background: var(--cm-warning-50); border-color: var(--cm-warning); color: var(--cm-warning); } .btn-outline-warning { background: var(--cm-surface); border-color: var(--cm-border-2); color: var(--cm-warning); } .btn-outline-warning:hover { background: var(--cm-warning-50); border-color: var(--cm-warning); color: var(--cm-warning); } /* Destructive: outline red; solid red is kept for the confirm button of a destructive dialog. */ .btn-outline-danger { background: var(--cm-surface); border-color: #F1B5B5; color: var(--cm-danger); } .btn-outline-danger:hover, .btn-outline-danger:focus, .btn-outline-danger:not(:disabled):not(.disabled):active { background: var(--cm-danger-50); border-color: var(--cm-danger); color: var(--cm-danger); } .btn-danger { background: var(--cm-danger); border-color: var(--cm-danger); color: #fff; } .btn-danger:hover, .btn-danger:focus, .btn-danger:not(:disabled):not(.disabled):active { background: #951B1B; border-color: #951B1B; color: #fff; } .btn-link { color: var(--cm-primary); font-weight: 600; min-height: 0; padding-left: 4px; padding-right: 4px; } .btn-link:hover { color: var(--cm-primary-600); text-decoration: none; } .btn-tool { min-height: 0; padding: 4px 6px; } .btn i.fas, .btn i.far, .btn i.fa { font-size: .92em; } .btn-block { display: flex; align-items: center; justify-content: center; } .btn-group > .btn { border-radius: var(--cm-r-control); } .btn-app { min-height: 0; border-radius: var(--cm-r-card); background: var(--cm-surface); border: 1px solid var(--cm-border); color: var(--cm-text); } /* Add actions. Anything that creates a new row - a section, a question, an option, an option group, a subject, a programme, a device - carries .cm-btn-add. They sit in a card header beside the title, where a plain link reads as a caption and gets missed; this is a tinted chip with a filled plus badge, unmistakably the action of that card, without competing with the one primary button in the page header. */ .btn.cm-btn-add { background: var(--cm-primary-50); border: 1px solid #BCCEF2; color: var(--cm-primary); font-weight: 600; padding: 5px 12px 5px 8px; gap: 8px; } .btn.cm-btn-add:hover, .btn.cm-btn-add:focus, .btn.cm-btn-add:not(:disabled):not(.disabled):active { background: var(--cm-primary); border-color: var(--cm-primary); color: #fff; } .btn.cm-btn-add > i.fas, .btn.cm-btn-add > i.far { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 6px; background: var(--cm-primary); color: #fff; font-size: 10px; } .btn.cm-btn-add:hover > i.fas, .btn.cm-btn-add:focus > i.fas, .btn.cm-btn-add:hover > i.far, .btn.cm-btn-add:focus > i.far { background: rgba(255,255,255,.24); } .btn.cm-btn-add:disabled, .btn.cm-btn-add.disabled { background: var(--cm-surface-2); border-color: var(--cm-border); color: var(--cm-text-3); opacity: 1; } .btn.cm-btn-add:disabled > i.fas, .btn.cm-btn-add.disabled > i.fas { background: var(--cm-text-3); } /* ---- forms --------------------------------------------------------------------------------- */ label, .col-form-label { font-size: 13px; font-weight: 600; color: var(--cm-text); margin-bottom: 6px; } label.custom-control-label, .form-check-label { font-weight: 400; font-size: 14px; } .form-control, .custom-select, .custom-file-label, .select2-container--default .select2-selection--single, .select2-container--bootstrap4 .select2-selection { font-family: var(--cm-font); font-size: 14px; color: var(--cm-text); border: 1px solid var(--cm-border-2); border-radius: var(--cm-r-control); box-shadow: 0 1px 2px rgba(16,24,40,.04); } .form-control:not(textarea):not([multiple]):not([size]), .custom-select:not([multiple]):not([size]) { height: 38px; } .form-control-sm:not(textarea), .custom-select-sm { height: 32px !important; font-size: 13px; } .form-control-lg:not(textarea) { height: 48px !important; font-size: 16px; } .form-control::placeholder { color: #98A2B3; } .form-control:focus, .custom-select:focus, .custom-file-input:focus ~ .custom-file-label { border-color: var(--cm-primary); box-shadow: 0 0 0 3px rgba(35, 80, 200, .16); } .form-control:disabled, .form-control[readonly], .custom-select:disabled { background: var(--cm-surface-2); color: var(--cm-text-2); } .form-text, small.form-text { font-size: 12.5px; color: var(--cm-text-3) !important; margin-top: 5px; } .form-group { margin-bottom: 16px; } .input-group-text { background: var(--cm-surface-2); border-color: var(--cm-border-2); color: var(--cm-text-3); font-size: 14px; } .input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .invalid-feedback { font-size: 12.5px; color: var(--cm-danger); } .form-control.is-invalid { border-color: var(--cm-danger); } .custom-control-input:checked ~ .custom-control-label::before { background: var(--cm-primary); border-color: var(--cm-primary); } .custom-switch .custom-control-input:checked ~ .custom-control-label::before { background: var(--cm-success); border-color: var(--cm-success); } .custom-file-label::after { background: var(--cm-surface-2); border-left-color: var(--cm-border-2); color: var(--cm-text); } .cm-code-input, input.cm-code-input { font-family: var(--cm-mono) !important; letter-spacing: .12em; text-transform: uppercase; } /* ---- tables -------------------------------------------------------------------------------- */ .table { color: var(--cm-text); font-size: 13.5px; } .table thead th, .table th { font-size: 12px; font-weight: 600; color: var(--cm-text-2); text-transform: none; letter-spacing: 0; background: var(--cm-surface-2); border-bottom: 1px solid var(--cm-border) !important; border-top: 0; padding: 10px 14px; white-space: nowrap; vertical-align: middle; } .table td { padding: 12px 14px; border-top: 1px solid var(--cm-border); vertical-align: middle; } .table-sm td, .table-sm th { padding: 7px 10px; } .table-striped tbody tr:nth-of-type(odd) { background: transparent; } .table-hover tbody tr:hover { background: #FAFBFC; } .table-bordered, .table-bordered td, .table-bordered th { border-color: var(--cm-border); } .table .num, .table td.text-right, .table th.text-right { text-align: right; font-variant-numeric: tabular-nums; } .table-responsive { border-radius: 0 0 var(--cm-r-card) var(--cm-r-card); } .card > .table-responsive:first-child, .card > .table:first-child { border-radius: var(--cm-r-card); } .table thead.thead-dark th, .table .thead-dark th { background: var(--cm-surface-2); color: var(--cm-text-2); border-color: var(--cm-border); } .table thead.thead-light th, .table .thead-light th { background: var(--cm-surface-2); color: var(--cm-text-2); } .table tr.table-success, .table tr.table-success > td { background: var(--cm-success-50); } .table tr.table-warning, .table tr.table-warning > td { background: var(--cm-warning-50); } .table tr.table-danger, .table tr.table-danger > td { background: var(--cm-danger-50); } .table tr.table-info, .table tr.table-info > td, .table tr.table-primary > td { background: var(--cm-primary-50); } .cm-cell-main { font-weight: 600; color: var(--cm-text); display: block; } .cm-cell-sub { font-size: 12px; color: var(--cm-text-3); display: block; } .cm-table-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--cm-border); } .cm-table-toolbar .cm-search { position: relative; flex: 1 1 240px; max-width: 320px; } .cm-table-toolbar .cm-search i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--cm-text-3); font-size: 12px; } .cm-table-toolbar .cm-search .form-control { padding-left: 30px; height: 34px !important; } .cm-table-toolbar .custom-select, .cm-table-toolbar .form-control { height: 34px !important; width: auto; font-size: 13px; } .cm-table-toolbar .cm-toolbar-right { margin-left: auto; color: var(--cm-text-3); font-size: 12.5px; } .cm-table-foot { padding: 10px 16px; font-size: 12.5px; color: var(--cm-text-3); border-top: 1px solid var(--cm-border); } .cm-row-menu .dropdown-toggle::after { display: none; } .cm-row-menu > .btn { min-height: 28px; padding: 2px 8px; color: var(--cm-text-3); background: transparent; border-color: transparent; } .cm-row-menu > .btn:hover { background: var(--cm-surface-2); border-color: var(--cm-border); } /* DataTables in the theme */ .dataTables_wrapper { font-size: 13px; } .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { border: 1px solid var(--cm-border-2); border-radius: var(--cm-r-control); height: 32px; padding: 0 8px; } .dataTables_wrapper .dataTables_info { color: var(--cm-text-3); font-size: 12.5px; } .page-link { color: var(--cm-text-2); border-color: var(--cm-border); font-size: 13px; } .page-item.active .page-link { background: var(--cm-primary); border-color: var(--cm-primary); } .page-item:first-child .page-link { border-radius: var(--cm-r-control) 0 0 var(--cm-r-control); } .page-item:last-child .page-link { border-radius: 0 var(--cm-r-control) var(--cm-r-control) 0; } /* ---- badges: text on tint, never white on a bright fill ------------------------------------ */ .badge { font-family: var(--cm-font); font-weight: 600; font-size: 12px; line-height: 1; padding: 4px 8px; border-radius: var(--cm-r-pill); letter-spacing: 0; } .badge-success, .cm-badge.success { background: var(--cm-success-50) !important; color: var(--cm-success) !important; } .badge-warning, .cm-badge.warning { background: var(--cm-warning-50) !important; color: var(--cm-warning) !important; } .badge-danger, .cm-badge.danger { background: var(--cm-danger-50) !important; color: var(--cm-danger) !important; } .badge-info, .badge-primary, .cm-badge.info { background: var(--cm-info-50) !important; color: var(--cm-info) !important; } .badge-secondary, .badge-light, .cm-badge.neutral { background: var(--cm-neutral-50) !important; color: var(--cm-neutral) !important; } .badge-dark, .cm-badge.dark { background: var(--cm-navy) !important; color: #fff !important; } .cm-badge.brass { background: var(--cm-brass-50) !important; color: var(--cm-brass-700) !important; } .cm-badge.purple { background: var(--cm-purple-50) !important; color: var(--cm-purple) !important; } .cm-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; line-height: 1; padding: 4px 9px; border-radius: var(--cm-r-pill); white-space: nowrap; background: var(--cm-neutral-50); color: var(--cm-neutral); } .cm-badge.dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .cm-badge.lg { font-size: 13px; padding: 5px 11px; } .cm-tag { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; background: var(--cm-warning-50); color: var(--cm-warning); vertical-align: middle; } /* election lifecycle (page 03): Draft · Nominations · Ready · Polling · Closed · Declared */ .cm-state-draft { background: var(--cm-neutral-50) !important; color: var(--cm-neutral) !important; } .cm-state-nominations { background: var(--cm-purple-50) !important; color: var(--cm-purple) !important; } .cm-state-ready { background: var(--cm-info-50) !important; color: var(--cm-info) !important; } .cm-state-polling { background: var(--cm-success-50) !important; color: var(--cm-success) !important; } .cm-state-polling::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; margin-right: 5px; vertical-align: 1px; } .cm-state-closed { background: var(--cm-warning-50) !important; color: var(--cm-warning) !important; } .cm-state-declared { background: var(--cm-navy) !important; color: #fff !important; } /* ---- notices: full border, no left accent bar ---------------------------------------------- */ .alert { border-radius: 8px; border: 1px solid; font-size: 13.5px; padding: 12px 14px; } .alert .icon { margin-right: 6px; } /* AdminLTE sets these with !important, so the tints need it too. */ .alert-success { background: #F1FAF5 !important; border-color: #BFE3CF !important; color: #0F5F3D !important; } .alert-warning { background: #FFFAF0 !important; border-color: #F5D9A8 !important; color: #7A4505 !important; } .alert-danger { background: #FFF7F7 !important; border-color: #F1C4C4 !important; color: #8F1C1C !important; } .alert-info, .alert-primary { background: #F5F8FE !important; border-color: #DBE4F9 !important; color: #1C3F9E !important; } .alert-secondary, .alert-light, .alert-cm-note { background: var(--cm-surface-2) !important; border-color: var(--cm-border) !important; color: var(--cm-text-2) !important; } .alert a:not(.btn) { color: inherit; text-decoration: underline; font-weight: 600; } /* AdminLTE's `.alert a { color:#fff }` outranks a lone button class, so a white button in an alert lost its label. Give each button its own colour back. */ .alert a.btn { text-decoration: none; } .alert a.btn-secondary, .alert a.btn-default, .alert a.btn-light, .alert a.btn-outline-secondary, .alert a.btn-outline-info, .alert a.btn-outline-dark, .alert a.btn-info, .alert a.btn-dark { color: #344054; } .alert a.btn-outline-primary { color: var(--cm-primary); } .alert a.btn-outline-success { color: var(--cm-success); } .alert a.btn-warning { color: var(--cm-warning); } .alert .close { color: inherit; opacity: .5; text-shadow: none; } .alert h5, .alert h6 { color: inherit; font-size: 14px; font-weight: 600; } .alert-cm-note { display: flex; gap: 10px; align-items: flex-start; } .alert-cm-note > i { color: var(--cm-text-2); margin-top: 3px; } .callout { border-radius: 8px; border: 1px solid var(--cm-border); border-left-width: 1px; box-shadow: none; background: var(--cm-surface); } .callout.callout-info, .callout.callout-warning, .callout.callout-danger, .callout.callout-success { border-left-color: var(--cm-border); } .callout.callout-warning { background: var(--cm-warning-50); border-color: #F4D19B; } .callout.callout-danger { background: var(--cm-danger-50); border-color: #F2B8B8; } .callout.callout-info { background: var(--cm-info-50); border-color: #BCCDF3; } .callout.callout-success { background: var(--cm-success-50); border-color: #A8DCC2; } /* the anonymity / secrecy note - the same shield everywhere */ .cm-shield-note { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--cm-text-2); background: var(--cm-surface-2); border: 1px solid var(--cm-border); border-radius: 8px; padding: 10px 12px; } .cm-shield-note > i { color: var(--cm-text-2); margin-top: 2px; } /* ---- progress ------------------------------------------------------------------------------ */ .progress { height: 8px; border-radius: var(--cm-r-pill); background: var(--cm-border); box-shadow: none; overflow: hidden; } .progress.progress-sm, .progress.progress-xs, .progress.thin { height: 6px; } .progress-bar { background: var(--cm-primary); } .progress-bar.bg-success { background: var(--cm-success) !important; } .progress-bar.bg-warning { background: #E3A13B !important; } .progress-bar.bg-danger { background: var(--cm-danger) !important; } .progress-bar.bg-info { background: var(--cm-primary) !important; } .cm-progress-row { display: flex; align-items: center; gap: 10px; min-width: 120px; } .cm-progress-row .progress { flex: 1 1 auto; } .cm-progress-row .cm-progress-val { font-size: 12.5px; color: var(--cm-text-2); white-space: nowrap; font-variant-numeric: tabular-nums; } .cm-progress-row .cm-progress-val b { color: var(--cm-text); font-weight: 600; } /* ---- tabs ---------------------------------------------------------------------------------- */ .cm-tabs, .nav-tabs.cm-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 4px; border-bottom: 1px solid var(--cm-border); margin: 0 0 20px; padding: 0; list-style: none; scrollbar-width: thin; } .cm-tabs .nav-link { border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; background: transparent !important; color: var(--cm-text-2) !important; font-weight: 500; font-size: 13.5px; padding: 10px 12px !important; margin-bottom: -1px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; } .cm-tabs .nav-link:hover { color: var(--cm-text) !important; } .cm-tabs .nav-link.active { color: var(--cm-primary) !important; border-bottom-color: var(--cm-primary) !important; font-weight: 600; } .cm-tabs .nav-link .cm-count { font-size: 11.5px; font-weight: 600; background: var(--cm-neutral-50); color: var(--cm-text-2); border-radius: var(--cm-r-pill); padding: 1px 7px; } .nav-tabs { border-bottom-color: var(--cm-border); } .nav-tabs .nav-link { color: var(--cm-text-2); font-weight: 500; border-radius: 6px 6px 0 0; } .nav-tabs .nav-link.active { color: var(--cm-primary); font-weight: 600; border-color: var(--cm-border) var(--cm-border) #fff; } .nav-pills .nav-link { border-radius: var(--cm-r-control); color: var(--cm-text-2); font-weight: 500; } .nav-pills .nav-link.active, .nav-pills .show > .nav-link { background: var(--cm-primary-50); color: var(--cm-primary); } .card-header.p-2 .nav-pills .nav-link, .card-header .nav-pills .nav-link { font-size: 13.5px; } /* ---- lifecycle stepper (election) ---------------------------------------------------------- */ .ecg-stepper li { color: var(--cm-text-3); font-size: 12.5px; } .ecg-stepper li::before { background: var(--cm-border); height: 2px; top: 13px; } .ecg-stepper .dot { width: 24px; height: 24px; border: 2px solid var(--cm-border-2); background: #fff; color: transparent; font-size: 10px; } .ecg-stepper .dot i { display: none; } .ecg-stepper li.done::before { background: var(--cm-primary); } .ecg-stepper li.done .dot { background: var(--cm-primary); border-color: var(--cm-primary); color: #fff; } .ecg-stepper li.done .dot::after { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 10px; } .ecg-stepper li.done { color: var(--cm-text-2); } .ecg-stepper li.current .dot, .ecg-stepper li.current.polling .dot, .ecg-stepper li.current.declared .dot { background: #fff; border-color: var(--cm-primary); box-shadow: 0 0 0 4px var(--cm-primary-100); } .ecg-stepper li.current .dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cm-primary); } .ecg-stepper li.current.polling .dot { border-color: var(--cm-success); box-shadow: 0 0 0 4px var(--cm-success-50); } .ecg-stepper li.current.polling .dot::after { background: var(--cm-success); } .ecg-stepper li.current { color: var(--cm-primary); font-weight: 600; } .ecg-stepper li.current.polling { color: var(--cm-success); } .ecg-stepper li.current.declared { color: var(--cm-navy); } /* numbered steps (feedback sections, desk loop) */ .cm-steps { display: flex; gap: 4px; margin: 0 0 20px; padding: 0; list-style: none; } .cm-steps li { flex: 1 1 0; min-width: 0; font-size: 12px; color: var(--cm-text-3); padding-top: 10px; border-top: 3px solid var(--cm-border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cm-steps li.done { border-top-color: var(--cm-primary); color: var(--cm-text-2); } .cm-steps li.current { border-top-color: var(--cm-primary); color: var(--cm-primary); font-weight: 600; } .cm-num-step { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--cm-navy); color: #fff; font-size: 11px; font-weight: 700; flex: 0 0 20px; } /* ---- checklist ---------------------------------------------------------------------------- */ .cm-checklist { list-style: none; margin: 0; padding: 0; } .cm-checklist li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--cm-border); font-size: 13.5px; } .cm-checklist li:last-child { border-bottom: 0; } .cm-checklist .cm-check { flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; margin-top: 1px; border: 1.5px solid var(--cm-border-2); color: transparent; } .cm-checklist li.ok .cm-check { background: var(--cm-success); border-color: var(--cm-success); color: #fff; } .cm-checklist li.warn .cm-check { background: var(--cm-warning-50); border-color: var(--cm-warning); color: var(--cm-warning); } .cm-checklist li.bad .cm-check { background: var(--cm-danger-50); border-color: var(--cm-danger); color: var(--cm-danger); } .cm-checklist .cm-check-meta { margin-left: auto; font-size: 12px; color: var(--cm-text-3); white-space: nowrap; } .ecg-check-list li { border-bottom: 1px solid var(--cm-border); padding: 9px 0; } /* ---- danger zone -------------------------------------------------------------------------- */ .cm-danger-zone { border-color: #F2B8B8 !important; } .cm-danger-zone > .card-header { color: var(--cm-danger); border-bottom-color: #F8D4D4; } .cm-danger-zone > .card-header .card-title { color: var(--cm-danger); } .cm-danger-row { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--cm-border); } .cm-danger-row:last-child { border-bottom: 0; padding-bottom: 0; } .cm-danger-row:first-child { padding-top: 0; } .cm-danger-row b { display: block; font-size: 13.5px; } .cm-danger-row span { font-size: 12.5px; color: var(--cm-text-3); } /* ---- key / value -------------------------------------------------------------------------- */ .cm-kv { margin: 0; } .cm-kv > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--cm-border); font-size: 13.5px; } .cm-kv > div:last-child { border-bottom: 0; } .cm-kv dt { font-weight: 400; color: var(--cm-text-3); font-size: 13px; text-transform: none; letter-spacing: 0; margin: 0; } .cm-kv dd { margin: 0; text-align: right; font-weight: 500; } .ecg-kv dt { font-weight: 600; color: var(--cm-text-3); font-size: 11px; letter-spacing: .06em; } /* ---- empty state ---------------------------------------------------------------------------- */ .cm-empty, .ecg-empty { text-align: center; padding: 40px 16px; color: var(--cm-text-3); } .cm-empty > i, .ecg-empty > i { font-size: 28px; color: var(--cm-border-2); opacity: 1; display: block; margin: 0 auto 12px; } .cm-empty b, .ecg-empty b { display: block; color: var(--cm-text); font-size: 14px; margin-bottom: 4px; } /* ---- codes and hashes ---------------------------------------------------------------------- */ .cm-hash { font-family: var(--cm-mono); font-size: 12px; word-break: break-all; background: var(--cm-surface-2); border: 1px solid var(--cm-border); border-radius: 6px; padding: 8px 10px; color: var(--cm-text); line-height: 1.5; } .cm-slip-code { font-family: var(--cm-mono); letter-spacing: .1em; font-weight: 500; } /* ---- modals / dropdowns / toasts ----------------------------------------------------------- */ .modal-content { border: 0; border-radius: 12px; box-shadow: var(--cm-shadow-modal); } .modal-header { border-bottom: 1px solid var(--cm-border); padding: 16px 20px; background: var(--cm-surface) !important; color: var(--cm-text) !important; border-radius: 12px 12px 0 0; } .modal-header[class*="bg-"] { background: var(--cm-surface) !important; color: var(--cm-text) !important; } .modal-header .close { color: var(--cm-text-3) !important; text-shadow: none; opacity: .8; } .modal-title { font-size: 17px; font-weight: 600; color: var(--cm-text); } .modal-body { padding: 20px; } .modal-footer { border-top: 1px solid var(--cm-border); padding: 12px 20px; background: var(--cm-surface); border-radius: 0 0 12px 12px; } .modal-backdrop.show { opacity: .55; background: var(--cm-navy); } .dropdown-menu { border: 1px solid var(--cm-border); border-radius: 8px; box-shadow: 0 8px 24px rgba(16,24,40,.12); font-size: 13.5px; padding: 4px; } .dropdown-item { border-radius: 6px; padding: 7px 12px; color: var(--cm-text); } .dropdown-item:hover { background: var(--cm-surface-2); } .dropdown-item.text-danger:hover { background: var(--cm-danger-50); } .dropdown-item i { width: 18px; color: var(--cm-text-3); } .dropdown-item.text-danger i { color: inherit; } .swal2-popup { font-family: var(--cm-font) !important; border-radius: 12px !important; } .swal2-popup .swal2-title { font-size: 20px !important; font-weight: 600 !important; color: var(--cm-text) !important; } .swal2-popup .swal2-styled.swal2-confirm { background: var(--cm-primary) !important; border-radius: var(--cm-r-control) !important; font-weight: 600 !important; } .swal2-popup .swal2-styled.swal2-cancel { background: #fff !important; color: var(--cm-text) !important; border: 1px solid var(--cm-border-2) !important; border-radius: var(--cm-r-control) !important; font-weight: 600 !important; } .jconfirm .jconfirm-box { border-radius: 12px !important; font-family: var(--cm-font); } /* ---- footer -------------------------------------------------------------------------------- */ .main-footer { background: transparent; border-top: 1px solid var(--cm-border); color: var(--cm-text-3); font-size: 12px; padding: 12px var(--cm-gutter); } .main-footer strong { color: var(--cm-text-2); font-weight: 600; } /* ---- charts -------------------------------------------------------------------------------- */ .cm-chart { position: relative; width: 100%; } .cm-chart > canvas { display: block; width: 100% !important; height: 100% !important; } .cm-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--cm-text-2); margin: 0; padding: 0; list-style: none; } .cm-legend li { display: inline-flex; align-items: center; gap: 6px; } .cm-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } /* stacked horizontal distribution bar (reports: 1..5 share) */ .cm-dist { display: flex; height: 12px; border-radius: 3px; overflow: hidden; background: var(--cm-border); min-width: 120px; } .cm-dist > span { display: block; height: 100%; } /* Rating colours: red (lowest) - orange - amber - light green - green (highest). Yes = wants a change (orange), No / N.A. neutral. */ .cm-dist .s1 { background: #D64541; } .cm-dist .s2 { background: #F08C3A; } .cm-dist .s3 { background: #F2C744; } .cm-dist .s4 { background: #86C66C; } .cm-dist .s5 { background: #1E8C4E; } .cm-dist .sy { background: #F08C3A; } .cm-dist .sn { background: #C9CED6; } .cm-dist .sna { background: #C9CED6; } .cm-legend .s1 { background: #D64541; } .cm-legend .s2 { background: #F08C3A; } .cm-legend .s3 { background: #F2C744; } .cm-legend .s4 { background: #86C66C; } .cm-legend .s5 { background: #1E8C4E; } .cm-legend .sy { background: #F08C3A; } .cm-legend .sn { background: #C9CED6; } .cm-legend .sna { background: #C9CED6; } .cm-dist > span, .cm-legend i { -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* per-row horizontal bar with value */ .cm-bar-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--cm-border); } .cm-bar-row:last-child { border-bottom: 0; } .cm-bar-row .cm-bar-label { font-size: 13.5px; min-width: 0; } .cm-bar-row .cm-bar-value { font-size: 13px; color: var(--cm-text-2); font-variant-numeric: tabular-nums; text-align: right; } .cm-bar-row .cm-bar-value b { color: var(--cm-text); } .cm-bar-row .progress { grid-column: 1 / -1; } /* ---- segmented rating scale (student form) ------------------------------------------------- */ .cm-scale { display: inline-flex; border: 1px solid var(--cm-border-2); border-radius: 8px; overflow: hidden; background: #fff; flex-wrap: nowrap; } .cm-scale > label { margin: 0; min-width: 72px; padding: 6px 8px; text-align: center; cursor: pointer; border-left: 1px solid var(--cm-border-2); font-weight: 400; display: flex; flex-direction: column; align-items: center; gap: 1px; user-select: none; } .cm-scale > label:first-of-type { border-left: 0; } .cm-scale > label b { font-size: 15px; font-weight: 600; color: var(--cm-text); line-height: 1.2; } .cm-scale > label span { font-size: 10.5px; color: var(--cm-text-3); white-space: nowrap; } .cm-scale > input { position: absolute; opacity: 0; pointer-events: none; } .cm-scale > input:focus-visible + label { box-shadow: inset 0 0 0 2px var(--cm-primary); } .cm-scale > input:checked + label { background: var(--cm-primary); } .cm-scale > input:checked + label b, .cm-scale > input:checked + label span { color: #fff; } .cm-scale > label:hover { background: var(--cm-primary-50); } @media (max-width: 575px) { .cm-scale { display: flex; flex-direction: column; width: 100%; border: 0; gap: 6px; background: transparent; } .cm-scale > label { flex-direction: row; justify-content: flex-start; gap: 12px; border: 1px solid var(--cm-border-2) !important; border-radius: 8px; min-height: 44px; padding: 8px 14px; background: #fff; } .cm-scale > label span { font-size: 14px; color: var(--cm-text); } .cm-scale > input:checked + label { background: var(--cm-primary-50); border-color: var(--cm-primary) !important; } .cm-scale > input:checked + label b, .cm-scale > input:checked + label span { color: var(--cm-primary); font-weight: 600; } } /* ---- auth pages (sign-in, token login) ----------------------------------------------------- */ body.cm-auth-body { background: var(--cm-surface); min-height: 100vh; margin: 0; } .cm-auth { display: flex; min-height: 100vh; } .cm-auth-panel { flex: 0 0 46%; max-width: 620px; background: var(--cm-navy); color: rgba(255,255,255,.8); padding: 40px 56px; display: flex; flex-direction: column; position: relative; overflow: hidden; } .cm-auth-panel::after { content: ""; position: absolute; right: -120px; bottom: -120px; width: 360px; height: 360px; border-radius: 50%; border: 1px solid rgba(212,181,114,.18); pointer-events: none; } .cm-auth-logo { display: flex; align-items: center; gap: 12px; } .cm-auth-logo .cm-brand-tile { width: 48px; height: 48px; flex-basis: 48px; border-radius: 10px; } .cm-auth-logo .cm-brand-tile img { max-width: 42px; max-height: 42px; } .cm-auth-logo small { font-family: var(--cm-mono); font-size: 10.5px; letter-spacing: .08em; color: rgba(255,255,255,.5); text-transform: uppercase; } .cm-auth-logo b { color: #fff; font-size: 14px; } .cm-auth-hero { margin-top: auto; margin-bottom: auto; padding: 40px 0; } .cm-auth-hero h1 { color: #fff; font-size: 40px; font-weight: 700; line-height: 1.12; letter-spacing: -.02em; margin: 0 0 14px; } .cm-auth-hero p { font-size: 15px; color: rgba(255,255,255,.72); max-width: 420px; margin: 0; } .cm-auth-points { list-style: none; padding: 0; margin: 22px 0 0; } .cm-auth-points li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: rgba(255,255,255,.8); margin-bottom: 12px; } .cm-auth-points li i { color: var(--cm-brass); width: 18px; margin-top: 3px; text-align: center; } .cm-auth-callout { border: 1px solid var(--cm-navy-3); background: rgba(255,255,255,.03); border-radius: 10px; padding: 14px 16px; display: flex; gap: 12px; font-size: 13px; } .cm-auth-callout i { color: var(--cm-brass); margin-top: 3px; } .cm-auth-callout b { color: #fff; display: block; margin-bottom: 2px; } .cm-auth-foot-left { font-size: 12px; color: rgba(255,255,255,.45); margin-top: 20px; } .cm-auth-main { flex: 1 1 auto; display: flex; flex-direction: column; background: var(--cm-surface); } .cm-auth-form { width: 100%; max-width: 380px; margin: auto; padding: 40px 24px; } .cm-auth-form h2 { font-size: 26px; font-weight: 600; letter-spacing: -.015em; margin: 0 0 4px; } .cm-auth-form .cm-auth-sub { color: var(--cm-text-2); margin-bottom: 24px; } .cm-auth-form .btn-lg { width: 100%; } .cm-auth-or { display: flex; align-items: center; gap: 12px; color: var(--cm-text-3); font-size: 12px; margin: 18px 0; } .cm-auth-or::before, .cm-auth-or::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--cm-border); } .cm-auth-footer { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 32px; font-size: 12px; color: var(--cm-text-3); border-top: 1px solid var(--cm-border); } /* A sign-in page must not scroll. The design breathes on a desktop screen, but a 1366x768 laptop leaves about 625px of viewport once the browser's own chrome is off, and the padding alone was enough to push the token page 42px over. Height queries, so the roomy version survives wherever there is room for it, and only a short screen pays. */ @media (max-height: 760px) { .cm-auth-panel { padding-top: 28px; padding-bottom: 28px; } .cm-auth-hero { padding: 20px 0; } .cm-auth-hero h1 { font-size: 34px; } .cm-auth-points { margin-top: 16px; } .cm-auth-points li { margin-bottom: 9px; } .cm-auth-form { padding-top: 20px; padding-bottom: 20px; } .cm-auth-form .cm-auth-sub { margin-bottom: 16px; } .cm-auth-or { margin: 12px 0; } .cm-auth-foot-left { margin-top: 12px; } .cm-auth-footer { padding: 10px 32px; } /* These pages also carry a banner - signed out, token expired - and it must not be what pushes the button off the screen. The whole form tightens a notch rather than any one part of it being squeezed. */ .cm-auth-form .alert { padding: 10px 12px; font-size: 13px; margin-bottom: 14px; } .cm-auth-form .form-group { margin-bottom: 12px; } .cm-auth-form label { margin-bottom: 4px; } } @media (max-height: 660px) { .cm-auth-panel { padding-top: 20px; padding-bottom: 20px; } .cm-auth-hero { padding: 12px 0; } .cm-auth-hero h1 { font-size: 29px; margin-bottom: 10px; } .cm-auth-form { padding-top: 12px; padding-bottom: 12px; } .cm-auth-form h2 { font-size: 22px; } .cm-auth-form .cm-auth-sub { margin-bottom: 12px; font-size: 13px; } .cm-auth-form .alert { padding: 8px 10px; font-size: 12.5px; line-height: 1.35; margin-bottom: 10px; } .cm-auth-form .form-group { margin-bottom: 9px; } .cm-auth-form .form-control, .cm-auth-form .custom-select { height: 40px; } .cm-auth-form .btn-lg { min-height: 42px; } .cm-auth-footer { padding: 8px 32px; } } @media (max-height: 610px) { /* The help under the token box repeats what the placeholder already says. */ .cm-auth-form .form-text { display: none; } .cm-auth-form .form-group { margin-bottom: 7px; } .cm-auth-form .alert { margin-bottom: 8px; } } @media (max-height: 560px) { /* Shortest step: a banner AND a netbook. The heading carries the meaning, so the sub-line goes. */ .cm-auth-form .cm-auth-sub { display: none; } .cm-auth-form h2 { font-size: 19px; margin-bottom: 8px; } .cm-auth-form .alert { padding: 7px 9px; font-size: 12px; margin-bottom: 7px; } .cm-auth-form .form-group { margin-bottom: 6px; } .cm-auth-form .form-control, .cm-auth-form .custom-select { height: 36px; } .cm-auth-form .btn-lg { min-height: 38px; } .cm-auth-footer { padding: 6px 32px; font-size: 11px; } } @media (max-height: 580px) { /* A netbook, or a laptop with every toolbar showing. The form still has to be reachable without scrolling for a queue of students at a kiosk. */ .cm-auth-hero p, .cm-auth-points, .cm-auth-callout { display: none; } .cm-auth-form { padding-top: 8px; padding-bottom: 8px; } .cm-auth-form h2 { font-size: 20px; } .cm-auth-form .form-group { margin-bottom: 10px; } .cm-auth-footer { padding: 7px 32px; } } .cm-pw { position: relative; } .cm-pw .form-control { padding-right: 40px; } .cm-pw button { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--cm-text-3); padding: 6px 8px; min-height: 0; } .cm-token-input { font-family: var(--cm-mono) !important; font-size: 20px !important; letter-spacing: .14em; text-transform: uppercase; height: 52px !important; font-weight: 500; } .cm-auth-mobile-head { display: none; } @media (max-width: 991px) { .cm-auth { flex-direction: column; } .cm-auth-panel { flex: 0 0 auto; max-width: none; padding: 24px 20px; } .cm-auth-panel .cm-auth-hero { margin: 16px 0 0; padding: 0; } .cm-auth-panel .cm-auth-hero h1 { font-size: 24px; } .cm-auth-panel .cm-auth-hero p, .cm-auth-points, .cm-auth-callout, .cm-auth-foot-left { display: none; } .cm-auth-panel::after { display: none; } .cm-auth-form { margin: 0 auto; padding: 24px 20px 32px; max-width: 480px; } .cm-auth-form .form-control:not(textarea) { height: 48px !important; } .cm-auth-form .btn-lg { min-height: 48px; } .cm-auth-footer { padding: 14px 20px; } body.cm-auth-token .cm-auth-panel { display: none; } body.cm-auth-token .cm-auth-mobile-head { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--cm-border); font-weight: 600; font-size: 13.5px; } body.cm-auth-token .cm-auth-mobile-head .cm-brand-tile { box-shadow: 0 0 0 1px var(--cm-border); width: 28px; height: 28px; flex-basis: 28px; } } /* ---- student form shell (no sidebar) -------------------------------------------------------- */ body.cm-student { background: var(--cm-bg); } .cm-student-bar { background: #fff; border-bottom: 1px solid var(--cm-border); height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 24px; position: sticky; top: 0; z-index: 1030; } .cm-student-bar .cm-brand-tile { box-shadow: 0 0 0 1px var(--cm-border); width: 30px; height: 30px; flex-basis: 30px; } .cm-student-bar .cm-inst { font-weight: 600; font-size: 14px; } .cm-student-bar .cm-crumb-sep { color: var(--cm-border-2); } .cm-student-bar .cm-sub { color: var(--cm-text-3); font-size: 13px; } .cm-student-bar .cm-anon { margin-left: auto; } .cm-student-main { max-width: 1180px; margin: 0 auto; padding: 24px 24px 48px; } .cm-question { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--cm-border); } .cm-question:last-child { border-bottom: 0; } .cm-question .cm-q-text { font-size: 14px; flex: 1 1 auto; min-width: 0; } .cm-question .cm-q-text .cm-q-no { color: var(--cm-text-3); margin-right: 6px; font-variant-numeric: tabular-nums; } @media (max-width: 767px) { .cm-student-bar { padding: 0 14px; } .cm-student-bar .cm-crumb-sep, .cm-student-bar .cm-sub { display: none; } .cm-student-main { padding: 14px 12px 96px; } .cm-question { flex-direction: column; align-items: stretch; gap: 10px; } } .cm-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--cm-border); background: #fff; border-radius: 0 0 var(--cm-r-card) var(--cm-r-card); } @media (max-width: 575px) { .cm-form-foot { position: sticky; bottom: 0; z-index: 10; border-radius: 0; box-shadow: 0 -4px 12px rgba(16,24,40,.06); } } /* centred confirmation (thank-you, kiosk end states) */ .cm-message { max-width: 520px; margin: 48px auto; text-align: center; padding: 0 16px; } .cm-message .cm-message-icon { width: 64px; height: 64px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 18px; background: var(--cm-neutral-50); color: var(--cm-neutral); } .cm-message.success .cm-message-icon { background: var(--cm-success-50); color: var(--cm-success); } .cm-message.danger .cm-message-icon { background: var(--cm-danger-50); color: var(--cm-danger); } .cm-message.warning .cm-message-icon { background: var(--cm-warning-50); color: var(--cm-warning); } .cm-message.info .cm-message-icon { background: var(--cm-info-50); color: var(--cm-info); } .cm-message h1, .cm-message h2 { font-size: 28px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 10px; } .cm-message p { color: var(--cm-text-2); font-size: 15px; } .cm-message .cm-pill { display: inline-block; margin-top: 14px; padding: 7px 14px; border-radius: var(--cm-r-pill); border: 1px solid var(--cm-border); background: #fff; font-size: 13px; color: var(--cm-text-2); } /* ---- public pages (campaigns, results) ------------------------------------------------------ */ body.cm-public-body { background: var(--cm-bg); } .cm-public-head { background: #fff; border-bottom: 1px solid var(--cm-border); } .cm-public-head .container { display: flex; align-items: center; gap: 12px; height: 60px; } .cm-public-head .cm-brand-tile { box-shadow: 0 0 0 1px var(--cm-border); width: 32px; height: 32px; flex-basis: 32px; } .cm-public-head .cm-inst { font-weight: 600; color: var(--cm-text); font-size: 14px; } .cm-public-head .cm-inst-sub { color: var(--cm-text-3); font-size: 13px; margin-left: 4px; } .cm-public-head nav { margin-left: auto; display: flex; gap: 4px; } .cm-public-head nav a { color: var(--cm-text-2); font-size: 13.5px; font-weight: 500; padding: 8px 12px; border-radius: 6px; } .cm-public-head nav a:hover { background: var(--cm-surface-2); color: var(--cm-text); text-decoration: none; } .cm-public-head nav a.active { color: var(--cm-primary); font-weight: 600; } .cm-public-main { padding: 28px 0 40px; } .cm-public-foot { border-top: 1px solid var(--cm-border); text-align: center; font-size: 12px; color: var(--cm-text-3); padding: 18px 16px; } @media (max-width: 767px) { .cm-public-head .cm-inst-sub { display: none; } .cm-public-head .container { height: auto; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; } .cm-public-head nav { margin-left: 0; width: 100%; } } /* ---- print ---------------------------------------------------------------------------------- */ @media print { /* Bootstrap 4 prints on A3 with a 992 px minimum body width, which squeezes every page onto A4. */ @page { size: A4; margin: 12mm; } body, .container, .wrapper { min-width: 0 !important; } body { background: #fff; } .main-sidebar, .main-header, .main-footer, .cm-page-actions, .cm-no-print { display: none !important; } .content-wrapper { margin-left: 0 !important; background: #fff; } /* A tall card must be allowed to continue on the next page; keep its rows and small blocks whole instead. */ .card { box-shadow: none; break-inside: auto; } .card-header, tr, .cm-stat, .cm-kpi, .alert { break-inside: avoid; page-break-inside: avoid; } .card-header { break-after: avoid; page-break-after: avoid; } /* A scroll container cannot scroll on paper. Left as it is, it clips whatever does not fit and Chrome paints its scrollbar into the page - a grey bar across the sheet and the last columns missing. Everything that scrolls sideways on screen prints in full instead. */ .table-responsive, .cmr-table, .cm-scroll-x { overflow: visible !important; max-width: none !important; } .table-responsive > table, .cmr-table > table { width: 100% !important; } /* A stat tile's meta line is pulled 46px to the right on screen, to sit under the icon. In a four-up print grid that is 46px outside the tile, which is exactly what overflowed the sheet. */ .cm-stat-meta { margin-right: 0 !important; } /* A chart canvas keeps the pixel width it was laid out at on screen, which on a narrower sheet hangs a few pixels over the edge of its container and clips. */ canvas { max-width: 100% !important; height: auto !important; } } /* ============================================================================================= Component names used by the screen specifications. ============================================================================================= */ /* ---- sidebar: 232 px ------------------------------------------------------------------------ */ .main-sidebar, .main-sidebar::before { width: var(--cm-sidebar); } .main-sidebar .brand-link, .main-sidebar:hover .brand-link { width: var(--cm-sidebar); } @media (min-width: 768px) { body:not(.sidebar-collapse):not(.layout-top-nav) .content-wrapper, body:not(.sidebar-collapse):not(.layout-top-nav) .main-header, body:not(.sidebar-collapse):not(.layout-top-nav) .main-footer { margin-left: var(--cm-sidebar); } body.sidebar-collapse:not(.sidebar-mini) .main-sidebar, body.sidebar-collapse:not(.sidebar-mini) .main-sidebar::before { margin-left: calc(-1 * var(--cm-sidebar)); } .sidebar-mini.sidebar-collapse .main-sidebar:hover, .sidebar-mini.sidebar-collapse .main-sidebar:hover .brand-link { width: var(--cm-sidebar); } } @media (max-width: 767.98px) { body:not(.sidebar-open) .main-sidebar, body:not(.sidebar-open) .main-sidebar::before { margin-left: calc(-1 * var(--cm-sidebar)); } } .main-sidebar { border-right: 1px solid #0B1830; } .main-sidebar .brand-link { border-bottom: 1px solid rgba(255,255,255,.08) !important; padding: 16px; min-height: 70px; } .cm-brand-tile, .cm-logo-tile { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px rgba(212,181,114,.45); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; } .cm-brand-tile img, .cm-logo-tile img { max-width: 30px; max-height: 30px; object-fit: contain; } .cm-brand-text small, .cm-brand-sub { font: 500 10.5px var(--cm-mono); letter-spacing: .08em; color: var(--cm-brass); text-transform: uppercase; } .main-sidebar .sidebar { padding: 0; height: calc(100% - 70px); } .cm-module-switch { margin: 12px 16px; } .cm-module-switch > button, .cm-module-switch > .cm-module-current { height: 32px; border-radius: var(--cm-r-control); border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); font-size: 12.5px; } .nav-sidebar .nav-header { color: #7088AD !important; font-size: 10.5px !important; letter-spacing: .07em; padding: 14px 20px 6px !important; } .nav-sidebar > .nav-item, .nav-sidebar .nav-treeview > .nav-item { padding: 0 10px; } .nav-sidebar .nav-link { color: #C9D5E6 !important; height: 34px; padding: 0 10px !important; gap: 10px; } .nav-sidebar .nav-link .nav-icon { color: #8AA0C2; width: 16px !important; margin: 0 !important; } .nav-sidebar .nav-link:hover { background: rgba(255,255,255,.06) !important; } .nav-sidebar .nav-link.active, .sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active { background: linear-gradient(90deg, rgba(212,181,114,.18), rgba(212,181,114,.06)) !important; box-shadow: inset 0 0 0 1px rgba(212,181,114,.28) !important; color: #fff !important; font-weight: 600; } .nav-sidebar .nav-link small { color: #8AA0C2; } .cm-sidebar-user { margin: 0; padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.08); } .cm-sidebar-user .cm-avatar { flex-basis: 32px; width: 32px; height: 32px; background: rgba(212,181,114,.18); color: #E6CD94; font-size: 12px; font-weight: 600; } .cm-sidebar-user .cm-user-text small { color: #8AA0C2; } /* ---- topbar -------------------------------------------------------------------------------- */ .main-header.navbar { height: var(--cm-topbar); padding: 0 20px 0 8px; } .cm-crumbs { font-size: 13.5px; gap: 10px; } .cm-crumbs li + li::before { margin-right: 10px; font-size: 9px; color: #98A2B3; } .cm-crumbs .current { color: var(--cm-text); font-weight: 500; } .cm-session-chip { height: 32px; padding: 0 12px; border: 1px solid var(--cm-border-strong); border-radius: var(--cm-r-control); font-size: 13px; display: inline-flex; align-items: center; gap: 8px; background: #fff; } .cm-session-chip select { border: 0; background: transparent; font-weight: 600; color: var(--cm-text); outline: none; height: 30px; padding: 0 2px; } .cm-live { height: 26px; padding: 0 10px; border-radius: 999px; background: var(--cm-success-50); color: var(--cm-success); font-weight: 600; } .cm-live::before { background: currentColor; box-shadow: none; } /* ---- page head ------------------------------------------------------------- */ .cm-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin-bottom: 20px; } .cm-page-head h1 { font-size: 24px; font-weight: 600; letter-spacing: -.015em; margin: 0; line-height: 1.25; } .cm-page-head h1 .cm-badge, .cm-page-head h1 .badge { vertical-align: middle; margin-left: 8px; font-size: 12px; letter-spacing: 0; } .cm-page-head .cm-sub { font-size: 14px; color: var(--cm-text-2); margin-top: 4px; } .cm-page-head .cm-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .cm-page-head .cm-actions form { display: inline-flex; margin: 0; } .content-wrapper > .content:first-child, .content-wrapper > section.content:first-child { padding-top: 24px; } /* ---- cards ----------------------------------------------------------------- */ .card-header { border-bottom-color: #EEF0F3; } .card-header .card-title { font-size: 15.5px !important; float: none; } .card-header .card-subtitle { display: block; font-size: 12.5px; color: var(--cm-text-2); margin-top: 2px; font-weight: 400; } .card-footer { background: #fff; border-top-color: #EEF0F3; } .cm-card-danger { border-color: #F1C4C4 !important; } .cm-card-danger .card-header .card-title { color: var(--cm-danger); } /* ---- buttons: one height, icon + label on a line ------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; vertical-align: middle; } .btn > i + span, .btn > i.mr-1, .btn > i.mr-2 { margin-right: 0 !important; } .btn-block { width: 100%; } .btn-secondary, .btn-default, .btn-outline-secondary { color: #344054; } /* ---- tables ----------------------------------------------------------------- */ .table-cm { margin: 0; font-size: 13.5px; } .table-cm thead th { background: var(--cm-surface-2); border-top: 0; border-bottom: 1px solid var(--cm-border) !important; font-size: 12px; font-weight: 600; color: var(--cm-text-2); padding: 10px 16px; white-space: nowrap; } .table-cm td { border-top: 1px solid #F2F4F7; padding: 11px 16px; vertical-align: middle; } .table-cm tbody tr:hover { background: #FAFBFC; } .table-cm td.num, .table-cm th.num { text-align: right; font-variant-numeric: tabular-nums; } .cm-empty .cm-empty-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--cm-neutral-50); display: inline-flex; align-items: center; justify-content: center; color: var(--cm-text-3); margin-bottom: 10px; font-size: 16px; } .cm-empty strong { display: block; color: var(--cm-text); font-size: 14px; } /* ---- badges -------------------------------------------------------------------------------- */ .badge, .cm-badge { height: 22px; line-height: 22px; padding: 0 8px; display: inline-flex; align-items: center; gap: 5px; } /* ---- forms --------------------------------------------------------------------------------- */ .form-control:not(textarea):not([multiple]):not([size]), .custom-select:not([multiple]):not([size]) { height: 40px; } label, .col-form-label { color: #344054; } .form-control.cm-code { font-family: var(--cm-mono); font-size: 20px; letter-spacing: .12em; text-transform: uppercase; height: 52px !important; } /* ---- progress -------------------------------------------------------------- */ .progress.cm-progress { height: 8px; border-radius: 4px; background: #EEF0F3; } .progress.cm-progress .progress-bar { background: var(--cm-success); } .progress.cm-progress .progress-bar.bg-primary { background: var(--cm-primary) !important; } /* ---- election header + tabs ----------------------- */ .cm-el-head { background: #fff; border-bottom: 1px solid var(--cm-border); padding: 20px 28px 0; margin: -24px calc(-1 * var(--cm-gutter)) 20px; } .cm-el-head .cm-page-head { margin-bottom: 14px; } .cm-el-head .cm-tabs { border-bottom: 0; margin: 0; gap: 22px; } .cm-el-head .cm-tabs .nav-link { padding: 0 0 12px !important; font-size: 14px; } .nav-tabs.cm-tabs { gap: 24px; } /* ---- student form ---------------------------------------------------------- */ .cm-steps { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 8px; } .cm-steps .cm-step { font-size: 12.5px; color: var(--cm-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cm-steps .cm-step::before { content: ''; display: block; height: 4px; border-radius: 2px; background: var(--cm-border-strong); margin-bottom: 8px; } .cm-steps .cm-step.active, .cm-steps .cm-step.done { color: var(--cm-text-2); } .cm-steps .cm-step.active { color: var(--cm-primary); font-weight: 600; } .cm-steps .cm-step.active::before, .cm-steps .cm-step.done::before { background: var(--cm-primary); } /* ---- kiosk (layouts/kiosk, body.cm-kiosk) -------------------------------------------------- */ body.cm-kiosk { background: var(--cm-bg); font-size: 18px; min-height: 100vh; display: flex; flex-direction: column; margin: 0; } .cm-kiosk-head { min-height: 76px; background: var(--cm-navy); border-bottom: 2px solid var(--cm-brass); color: #fff; display: flex; align-items: center; gap: 14px; padding: 0 36px; flex: 0 0 auto; } .cm-kiosk-head .cm-logo-tile { width: 44px; height: 44px; flex-basis: 44px; } .cm-kiosk-head .cm-kiosk-title { line-height: 1.2; min-width: 0; } .cm-kiosk-head .cm-kiosk-title b { display: block; font-size: 17px; font-weight: 600; } .cm-kiosk-head .cm-kiosk-title small { color: #C9D5E6; font-size: 13px; } .cm-kiosk-head .cm-steps-text { margin-left: auto; font-size: 14px; color: #8AA0C2; white-space: nowrap; } .cm-kiosk-head .cm-steps-text b { color: #fff; font-weight: 600; } .cm-kiosk-main { flex: 1 1 auto; padding: 36px; } .cm-kiosk-foot { min-height: 52px; background: #fff; border-top: 1px solid var(--cm-border); display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 14px; color: var(--cm-text-2); flex: 0 0 auto; padding: 0 16px; text-align: center; } .cm-kiosk .btn { min-height: 60px; font-size: 18px; border-radius: 8px; padding: 0 24px; } .cm-kiosk .btn-sm { min-height: 40px; font-size: 15px; } .cm-choice { display: flex; align-items: center; gap: 12px; min-height: 96px; padding: 12px 14px; border: 1.5px solid var(--cm-border); border-radius: 10px; background: #fff; cursor: pointer; margin: 0; font-weight: 400; position: relative; } .cm-choice:hover { border-color: var(--cm-border-strong); } input:checked + .cm-choice { border: 2px solid var(--cm-primary); background: var(--cm-primary-50); } input:focus-visible + .cm-choice { box-shadow: 0 0 0 3px var(--cm-primary-100); } .cm-choice .cm-local { font-family: 'Noto Sans Bengali', var(--cm-font); font-weight: 600; } .cm-message { max-width: 620px; margin: 0 auto; background: #fff; border: 1px solid var(--cm-border); border-radius: 14px; padding: 44px 40px; text-align: center; } .cm-message .cm-message-icon { width: 88px; height: 88px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 36px; margin-bottom: 20px; } .cm-message.tone-success .cm-message-icon { background: var(--cm-success-50); color: var(--cm-success); } .cm-message.tone-danger .cm-message-icon { background: var(--cm-danger-50); color: var(--cm-danger); } .cm-message.tone-warning .cm-message-icon { background: var(--cm-warning-50); color: var(--cm-warning); } .cm-message.tone-info .cm-message-icon { background: var(--cm-primary-50); color: var(--cm-primary); } .cm-message.tone-neutral .cm-message-icon { background: var(--cm-neutral-50); color: var(--cm-text-2); } @media (max-width: 575.98px) { .cm-kiosk-head { padding: 0 16px; min-height: 64px; } .cm-kiosk-head .cm-steps-text { display: none; } .cm-kiosk-main { padding: 16px 0; } .cm-message { border-radius: 0; border-left: 0; border-right: 0; padding: 32px 20px; } } /* ---- public (layouts/public) --------------------------------------------------------------- */ .cm-public-head { height: auto; min-height: 64px; border-top: 3px solid var(--cm-navy); } .cm-public-head .container { max-width: 1160px; min-height: 61px; } .cm-public-main > .container { max-width: 1160px; } .cm-public-foot { background: #fff; } @media (max-width: 575.98px) { .cm-public-main > .container { padding-left: 16px; padding-right: 16px; } } /* ---- fixes from the screen rebuild ---------------------------------------------------------- */ .cm-table-toolbar .cm-search .form-control { width: 100%; } .cm-table-toolbar .custom-select { max-width: 240px; } /* A destructive SweetAlert confirm: Swal.fire({ customClass: { confirmButton: 'cm-danger' } }) */ .swal2-popup .swal2-styled.swal2-confirm.cm-danger { background: var(--cm-danger) !important; } /* action rows in a card: icon, title, one line under it, action on the right */ .cm-list-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--cm-border); } .cm-list-row:last-child { border-bottom: 0; padding-bottom: 0; } .cm-list-row:first-child { padding-top: 0; } .cm-list-row > i { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 8px; background: var(--cm-neutral-50); color: var(--cm-text-2); display: inline-flex; align-items: center; justify-content: center; } .cm-list-row .cm-list-text { flex: 1 1 auto; min-width: 0; } .cm-list-row .cm-list-text b { display: block; font-size: 13.5px; font-weight: 600; } .cm-list-row .cm-list-text span { font-size: 12.5px; color: var(--cm-text-3); } /* .btn is inline-flex; the hidden attribute must still win (a display rule would otherwise override it). */ [hidden] { display: none !important; } /* ---- select2 multiple selections as tags (default and bootstrap4 themes) ------------------ */ .select2-container .select2-selection--multiple { border: 1px solid var(--cm-border-strong) !important; border-radius: var(--cm-r-control) !important; min-height: 40px !important; } .select2-container--focus .select2-selection--multiple, .select2-container--open .select2-selection--multiple { border-color: var(--cm-primary) !important; box-shadow: 0 0 0 3px var(--cm-primary-100); } .select2-container .select2-selection--multiple .select2-selection__choice { background: var(--cm-primary-50) !important; border: 1px solid var(--cm-primary-100) !important; color: var(--cm-primary) !important; border-radius: 999px !important; padding: 1px 10px !important; font-size: 12.5px; font-weight: 500; margin-top: 6px !important; } .select2-container .select2-selection--multiple .select2-selection__choice__remove { color: var(--cm-primary) !important; opacity: .6; margin-right: 4px; border: 0 !important; background: none !important; } .select2-container .select2-selection--single { height: 40px !important; border: 1px solid var(--cm-border-strong) !important; border-radius: var(--cm-r-control) !important; } .select2-container .select2-selection--single .select2-selection__rendered { line-height: 38px !important; } .select2-container .select2-selection--single .select2-selection__arrow { height: 38px !important; } .select2-dropdown { border-color: var(--cm-border) !important; border-radius: 8px !important; box-shadow: 0 8px 24px rgba(16,24,40,.12); } .select2-results__option--highlighted[aria-selected] { background: var(--cm-primary) !important; } /* ---- row menus must not be clipped by a responsive table on desktop ----------------------- */ @media (min-width: 992px) { .card .table-responsive.cm-menus-visible { overflow: visible; } } /* ---- DataTables inside a card ------------------------------------------------------------ */ .card .dataTables_wrapper > .row { margin: 0; } .card .dataTables_wrapper > .row:first-child { padding: 12px 16px 0; } .card .dataTables_wrapper > .row:last-child { padding: 10px 16px; border-top: 1px solid var(--cm-border); align-items: center; } .card .dataTables_wrapper .dataTables_paginate .pagination { margin: 0; } table.dataTable.table-cm { margin-top: 8px !important; margin-bottom: 0 !important; border-collapse: collapse !important; } /* a tile without a meta line keeps its value under the label */ .cm-stat { justify-content: flex-start; } .cm-kv dt { white-space: nowrap; } .custom-control-label { font-weight: 400; } .ecg-post-card .card-header { background: #fff; } /* the student's class in the form's top bar */ .cm-class-chip { display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 55%; height: 32px; padding: 0 12px; border: 1px solid var(--cm-border); border-radius: 999px; background: var(--cm-surface-2); font-size: 13px; color: var(--cm-text-2); white-space: nowrap; } .cm-class-chip i { color: var(--cm-brass-700); flex: 0 0 auto; } .cm-class-chip .cm-class-prog { overflow: hidden; text-overflow: ellipsis; min-width: 0; font-weight: 600; color: var(--cm-text); } .cm-class-chip .cm-class-sep { color: var(--cm-text-3); } /* ---- dialogs (SweetAlert2 8 + its Bootstrap 4 theme) ----------------------------------------- The Bootstrap 4 theme styles the popup like a modal: no padding and a rule under the header, so text sat on the edge and was clipped. One clean dialog everywhere instead. */ .swal2-popup { padding: 28px 28px 22px !important; width: 26em !important; max-width: calc(100vw - 32px) !important; border-radius: 14px !important; box-shadow: var(--cm-shadow-modal) !important; font-family: var(--cm-font) !important; } .swal2-popup .swal2-header { padding: 0 !important; border: 0 !important; } .swal2-popup .swal2-icon { margin: 0 auto 14px !important; transform: scale(.72); transform-origin: center; } .swal2-popup .swal2-title { margin: 0 !important; padding: 0 !important; font-size: 19px !important; line-height: 1.35 !important; font-weight: 600 !important; color: var(--cm-text) !important; text-align: center; } .swal2-popup .swal2-content { padding: 0 !important; margin-top: 8px !important; font-size: 14px !important; line-height: 1.55; color: var(--cm-text-2) !important; } .swal2-popup .swal2-actions { margin: 22px 0 0 !important; padding: 0 !important; border: 0 !important; gap: 8px; flex-wrap: nowrap; } .swal2-popup .swal2-actions .swal2-styled { margin: 0 !important; min-height: 40px; padding: 8px 18px !important; font-size: 14px !important; box-shadow: none !important; } .swal2-popup .swal2-footer { border-top: 1px solid var(--cm-border) !important; margin: 18px 0 0 !important; padding: 12px 0 0 !important; font-size: 13px; } .swal2-popup .swal2-input, .swal2-popup .swal2-textarea, .swal2-popup .swal2-select { border: 1px solid var(--cm-border-strong) !important; border-radius: var(--cm-r-control) !important; box-shadow: none !important; font-size: 14px !important; margin: 14px 0 0 !important; } .swal2-popup .swal2-close { color: var(--cm-text-3) !important; } body:not(.swal2-toast-shown) .swal2-container.swal2-shown { background: rgba(15,31,58,.45) !important; } /* toasts: a quiet line in the corner */ .swal2-popup.swal2-toast { width: auto !important; min-width: 260px; padding: 12px 16px !important; border-radius: 10px !important; box-shadow: 0 10px 30px rgba(15,31,58,.18) !important; border: 1px solid var(--cm-border); } .swal2-popup.swal2-toast .swal2-icon { margin: 0 10px 0 0 !important; transform: scale(.8); } .swal2-popup.swal2-toast .swal2-title { font-size: 14.5px !important; text-align: left; margin: 0 !important; } .swal2-popup.swal2-toast .swal2-content { margin: 2px 0 0 !important; font-size: 13px !important; text-align: left; } .swal2-popup.swal2-toast .cm-toast-t { display: block; font-size: 14.5px; font-weight: 600; color: var(--cm-text); } .swal2-popup.swal2-toast .cm-toast-s { display: block; font-size: 13px; font-weight: 400; color: var(--cm-text-2); margin-top: 1px; } .swal2-popup.swal2-toast .swal2-title { display: block !important; } .swal2-container.swal2-top-end, .swal2-container.swal2-top-right, .swal2-container.swal2-top-start, .swal2-container.swal2-bottom-end { background: transparent !important; } .swal2-popup.swal2-toast { background: #fff !important; } .cm-student-bar .cm-signout .btn { min-height: 32px; } .cm-student-bar .cm-class-chip + .cm-signout { margin-left: 0; } /* required filters: a red star on the label, one plain line under the filter block */ .cm-req { color: var(--cm-danger); font-weight: 700; margin-left: 2px; } .cm-req-note { font-size: 12.5px; color: var(--cm-text-3); margin: 12px 0 0; } .cm-req-note .cm-req { margin: 0 4px 0 0; } /* ---- the sidebar stays put ---------------------------------------------------------------- Without AdminLTE's layout-fixed class the sidebar is as tall as the page and scrolls away with it. Pin it to the viewport on every page: its own menu scrolls if it is longer than the screen, the user block stays at its foot. The menu takes whatever height the brand leaves (a flex column), never a fixed calc(100vh - 70px): the brand is 71 px with its border, and that one pixel put a scrollbar on every sidebar that fitted. */ .main-sidebar { position: fixed !important; top: 0; bottom: 0; left: 0; height: 100vh !important; min-height: 0 !important; overflow: hidden; display: flex; flex-direction: column; } .main-sidebar > .brand-link { flex: 0 0 auto; } .main-sidebar .sidebar { flex: 1 1 auto; min-height: 0; height: auto !important; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; } .main-sidebar .sidebar > nav { flex: 1 1 auto; } .main-sidebar .cm-sidebar-user { position: static; margin-top: auto; } .content-wrapper { min-height: 100vh; } /* ---- toastr: the same quiet corner card as the dialogs' toasts ----------------------------- */ #toast-container > div { background: #fff !important; background-image: none !important; color: var(--cm-text) !important; opacity: 1 !important; width: 320px; padding: 12px 16px 12px 46px !important; border-radius: 10px !important; border: 1px solid var(--cm-border); box-shadow: 0 10px 30px rgba(15,31,58,.18) !important; font-family: var(--cm-font); font-size: 13.5px; position: relative; } #toast-container > div:hover { box-shadow: 0 12px 34px rgba(15,31,58,.24) !important; } #toast-container > div::before { font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 16px; top: 13px; font-size: 16px; } #toast-container > .toast-success::before { content: "\f058"; color: var(--cm-success); } #toast-container > .toast-error::before { content: "\f06a"; color: var(--cm-danger); } #toast-container > .toast-warning::before { content: "\f071"; color: var(--cm-warning-icon); } #toast-container > .toast-info::before { content: "\f05a"; color: var(--cm-primary); } #toast-container > div .toast-title { font-weight: 600; } #toast-container > div .toast-message { color: var(--cm-text-2); } #toast-container > div .toast-close-button { color: var(--cm-text-3); text-shadow: none; opacity: .7; } #toast-container .toast-progress { background: var(--cm-border-strong); opacity: 1; height: 3px; } /* A selected item in any list reads the same everywhere: light tint, a bar on the left, blue text. */ .list-group-item.active { background: var(--cm-primary-50) !important; border-color: var(--cm-border) !important; color: var(--cm-primary) !important; box-shadow: inset 3px 0 0 var(--cm-primary); font-weight: 600; z-index: 1; } .list-group-item-action:hover { background: var(--cm-surface-2); } /* ---- account menu, top right (every role) ------------------------------------------------ */ .cm-usermenu > .nav-link { display: flex; align-items: center; gap: 8px; color: var(--cm-text-2); } .cm-usermenu > .nav-link:hover { color: var(--cm-text); } .cm-um-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--cm-navy); color: #E6CD94; font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; text-transform: uppercase; } .cm-um-name { font-size: 13.5px; font-weight: 500; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cm-um-caret { font-size: 9px; color: var(--cm-text-3); } .cm-usermenu .dropdown-menu { min-width: 230px; } .cm-um-head { padding: 8px 12px 6px; line-height: 1.3; } .cm-um-head b { display: block; font-size: 13.5px; } .cm-um-head small { color: var(--cm-text-3); font-family: var(--cm-mono); font-size: 11.5px; word-break: break-all; } .cm-usermenu .dropdown-item { cursor: pointer; } /* ---- topbar: the sidebar's own navy, one frame with it ------------------------------------- A white topbar ran straight into the page. The same navy as the sidebar makes the two one L-shaped frame round the light working area, and the topbar is exactly as tall as the sidebar's brand block, so their bottom hairlines meet in one line. Both take --cm-topbar-h: change it in one place. */ :root { --cm-topbar-h: 72px; } .main-sidebar .brand-link { height: var(--cm-topbar-h); min-height: 0; padding-top: 0; padding-bottom: 0; } .main-header.navbar, .main-header.navbar.navbar-white { background: var(--cm-navy) !important; height: var(--cm-topbar-h); min-height: 0; border-bottom: 1px solid rgba(255,255,255,.08) !important; } .main-header .nav-link { height: var(--cm-topbar-h); } .main-header .nav-link, .main-header .cm-usermenu > .nav-link { color: #C9D5E6; } .main-header .nav-link:hover, .main-header .cm-usermenu > .nav-link:hover { color: #fff; } .main-header .cm-crumbs, .main-header .cm-crumbs a { color: #9FB2CF; } .main-header .cm-crumbs a:hover, .main-header .cm-crumbs li:last-child, .main-header .cm-crumbs .current { color: #fff; } .main-header .cm-crumbs li + li::before { color: #7088AD; } .main-header .cm-um-avatar { background: var(--cm-brass); color: var(--cm-navy); } .main-header .cm-um-caret { color: #9FB2CF; } .main-header .cm-session-chip { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #C9D5E6; } .main-header .cm-session-chip select { color: #fff; } .main-header .cm-session-chip select option { color: var(--cm-text); background: #fff; } .main-header .nav-link.text-muted, .main-header .text-muted { color: #9FB2CF !important; } /* the menu button: brass, like the active icon in the sidebar. AdminLTE's .navbar-light .navbar-nav .nav-link outranks .main-header .nav-link and painted it black on the navy bar, hence the fuller selector. */ .main-header.navbar-light .navbar-nav .nav-link[data-widget="pushmenu"] { color: var(--cm-brass); } .main-header.navbar-light .navbar-nav .nav-link[data-widget="pushmenu"]:hover { color: #E6CD94; } .main-header.navbar-light .navbar-nav .nav-link { color: #C9D5E6; } .main-header.navbar-light .navbar-nav .nav-link:hover { color: #fff; } /* ---- sidebar: compact enough for a laptop screen -------------------------------------------- The department menu (9 links, 3 headings) needed 649 px and a 1366 x 768 laptop browser leaves about 630, so it scrolled by 19 px. Tighter rows keep it whole down to ~590 px; a longer menu still scrolls, on a thin quiet bar. */ .nav-sidebar .nav-link { height: 32px; } .nav-sidebar .nav-header { padding: 10px 20px 4px !important; } .cm-module-switch { margin: 10px 16px 6px; } .nav-sidebar { padding-bottom: 6px; } .cm-sidebar-user { padding: 9px 16px; } .main-sidebar .sidebar { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; } .main-sidebar .sidebar::-webkit-scrollbar { width: 6px; } .main-sidebar .sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; } .main-sidebar .sidebar::-webkit-scrollbar-track { background: transparent; } /* ---- every other top bar: the dashboard's navy ------------------------------------------------- The public election pages, the student feedback form and the access-denied page carry their own headers, not .main-header, so the navy topbar above never reached them and they stayed white. Same navy, height and hairline as the dashboard bar; the institute's tile keeps its brass ring. (Kiosk screens were navy already.) */ .cm-public-head, .cm-student-bar, header.cm-denied-head { background: var(--cm-navy) !important; border-top: 0; border-bottom: 1px solid rgba(255,255,255,.08) !important; min-height: var(--cm-topbar-h); color: #fff; } .cm-public-head .container { min-height: var(--cm-topbar-h); } .cm-student-bar { height: var(--cm-topbar-h); } header.cm-denied-head { display: flex; align-items: center; padding-top: 0; padding-bottom: 0; } .cm-public-head .cm-brand-tile, .cm-student-bar .cm-brand-tile, header.cm-denied-head .cm-brand-tile { box-shadow: 0 0 0 2px var(--cm-brass); background: #fff; } .cm-public-head .cm-inst, .cm-student-bar .cm-inst, header.cm-denied-head > span:not(.cm-brand-tile) { color: #fff; } .cm-public-head .cm-inst-sub, .cm-student-bar .cm-sub { color: #9FB2CF; } .cm-student-bar .cm-crumb-sep { color: #4A5F83; } .cm-public-head nav a { color: #C9D5E6; } .cm-public-head nav a:hover { background: rgba(255,255,255,.06); color: #fff; } .cm-public-head nav a.active { color: var(--cm-brass); background: rgba(212,181,114,.10); } .cm-student-bar .cm-class-chip { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #C9D5E6; } .cm-student-bar .cm-class-chip i { color: var(--cm-brass); } .cm-student-bar .cm-class-chip .cm-class-prog { color: #fff; } .cm-student-bar .cm-class-chip .cm-class-sep { color: #7088AD; } .cm-student-bar .cm-signout .btn { background: transparent; border-color: rgba(255,255,255,.25); color: #E3EAF4; } .cm-student-bar .cm-signout .btn:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.4); color: #fff; } /* ---- headline figures: a tinted icon and a bigger number ------------------------------------ A grey label over a dark number on white read as one flat band: three tiles side by side and nothing in the dashboard drew the eye first. The number is now the largest thing on the tile, and each figure carries a tinted icon in the corner saying what it counts - the tones are the same ok / warn / bad senses the meta line uses. */ .cm-stat { position: relative; padding-right: 64px; min-height: 92px; } .cm-stat-label { font-weight: 500; } .cm-stat-value { font-size: 30px; margin-top: 3px; } /* The meta line sits below the icon, so it takes the tile's full width back. */ .cm-stat-meta { margin-right: -46px; } .cm-stat-ic { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; background: var(--cm-primary-50); color: var(--cm-primary); } .cm-stat-ic.tone-ok { background: var(--cm-success-50); color: var(--cm-success); } .cm-stat-ic.tone-warn { background: var(--cm-warning-50); color: var(--cm-warning); } .cm-stat-ic.tone-bad { background: var(--cm-danger-50); color: var(--cm-danger); } .cm-stat-ic.tone-purple { background: var(--cm-purple-50); color: var(--cm-purple); } .cm-stat-ic.tone-brass { background: var(--cm-brass-50); color: var(--cm-brass-700); } .cm-stat-ic.tone-muted { background: var(--cm-neutral-50); color: var(--cm-neutral); } .cm-stat-ic.tone-navy { background: #E7ECF5; color: var(--cm-navy); } /* A tile that is a link (the RO's election detail) says so on hover; a plain figure never moves. */ a.cm-stat:hover { border-color: var(--cm-primary-100); box-shadow: 0 4px 14px rgba(15,31,58,.10); text-decoration: none; } @media (max-width: 480px) { .cm-stat { padding-right: 52px; } .cm-stat-meta { margin-right: -36px; } .cm-stat-ic { width: 32px; height: 32px; top: 12px; right: 12px; font-size: 13px; border-radius: 8px; } } /* ---- the front door (D90, redesigned D93) ----------------------------------------------------- A navy bar the same as every signed-in screen, a light hero carrying the institute's own campus photograph, and the choice on the right. It must fit one screen without scrolling, so the whole page is a three-row grid - bar, body, footer - and the body is what flexes. */ .cm-fd { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; background: var(--cm-surface-2); } .cm-fd-bar { background: var(--cm-navy); display: flex; align-items: center; gap: 14px; padding: 0 28px; min-height: 72px; border-bottom: 1px solid rgba(255,255,255,.08); } .cm-fd-mark { width: 44px; height: 44px; flex-basis: 44px; border-radius: 10px; box-shadow: 0 0 0 2px var(--cm-brass); } .cm-fd-mark img { max-width: 34px; max-height: 34px; } .cm-fd-mark span { color: var(--cm-navy); font-weight: 700; font-size: 17px; } .cm-fd-name { color: #fff; font-size: 15px; font-weight: 600; letter-spacing: .01em; text-transform: uppercase; } /* The wash, the shapes and the photograph all belong to the body, so the picture spans the whole width and the choice panel floats over it rather than beside it. */ /* The product on the right of the bar, opposite the institute on the left. */ .cm-fd-brand { margin-left: auto; text-align: right; line-height: 1.25; } .cm-fd-brand b { display: block; font: 600 13px var(--cm-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cm-brass); } .cm-fd-brand small { display: block; font-size: 10.5px; color: rgba(255,255,255,.5); letter-spacing: .02em; } /* What this deployment can do, under the welcome. Navy on the pale hero: the one high-contrast block on the page, so a visitor who has never heard of the product learns what it is before they choose a door. */ .cm-fd-features { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 10px; max-width: 520px; } .cm-fd-features li { display: flex; align-items: flex-start; gap: 12px; background: var(--cm-navy); border-radius: 11px; padding: 12px 15px; box-shadow: 0 8px 22px rgba(15,31,58,.20); } .cm-fd-features i { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; background: rgba(212,181,114,.18); color: var(--cm-brass); margin-top: 1px; } .cm-fd-features b { display: block; font-size: 13.5px; font-weight: 600; color: #fff; letter-spacing: -.005em; } .cm-fd-features small { display: block; font-size: 12px; line-height: 1.45; color: rgba(255,255,255,.62); margin-top: 2px; } .cm-fd-body { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.15fr 1fr; align-items: stretch; min-height: 0; background: linear-gradient(135deg, #F7F9FC 0%, #EEF3FA 55%, #FBF7EE 100%); } .cm-fd-body::before { content: ""; position: absolute; top: -140px; right: 28%; width: 420px; height: 420px; border-radius: 50%; background: rgba(35,80,200,.07); } .cm-fd-body::after { content: ""; position: absolute; bottom: -180px; right: 34%; width: 380px; height: 380px; border-radius: 50%; background: rgba(212,181,114,.16); } /* The hero. The photograph is a layer under the words, desaturated and multiplied into the wash, so any snapshot of any building sits in the palette instead of fighting it. */ .cm-fd-hero { position: relative; z-index: 1; display: flex; align-items: center; padding: 40px 32px 40px 56px; } .cm-fd-art { position: absolute; inset: 0; z-index: 0; pointer-events: none; } /* Full bleed, desaturated and multiplied into the wash, so any snapshot of any building sits in the palette instead of fighting it - and so the words on the left stay readable over it. */ .cm-fd-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 65%; filter: grayscale(1) contrast(1.04); mix-blend-mode: multiply; opacity: .26; -webkit-mask-image: linear-gradient(to top, #000 45%, rgba(0,0,0,.35) 100%); mask-image: linear-gradient(to top, #000 45%, rgba(0,0,0,.35) 100%); } .cm-fd-watermark { position: absolute; right: 30%; bottom: 8%; width: 300px; max-width: 30%; opacity: .035; filter: grayscale(1); } .cm-fd-hero-text { position: relative; z-index: 1; max-width: 560px; } .cm-fd-rule { display: block; width: 56px; height: 4px; border-radius: 2px; background: var(--cm-brass); margin-bottom: 14px; } .cm-fd-overline { display: block; font: 600 11px var(--cm-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--cm-text-2); margin-bottom: 12px; } .cm-fd-hero h1 { font-size: 44px; font-weight: 700; line-height: 1.08; letter-spacing: -.025em; color: var(--cm-navy); margin: 0 0 16px; } .cm-fd-hero p { font-size: 15.5px; line-height: 1.6; color: var(--cm-text-2); margin: 0; max-width: 440px; } /* The choice, in a panel that lifts off the hero. */ .cm-fd-panel { position: relative; z-index: 1; display: flex; align-items: center; padding: 22px 56px 22px 0; min-width: 0; } .cm-fd-choice { width: 100%; max-width: 480px; background: #fff; border-radius: 18px; padding: 22px 24px 24px; box-shadow: 0 24px 60px rgba(15,31,58,.16); } .cm-fd-choice h2 { font-size: 19px; font-weight: 600; color: var(--cm-text); margin: 0; letter-spacing: -.01em; } .cm-fd-foot { background: #fff; border-top: 1px solid var(--cm-border); padding: 14px 28px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--cm-text-3); } /* The cards. The icon sits BESIDE the title, not above it: stacked it cost 72 px a card and pushed a 640 px-tall window into a scrollbar. */ .cm-portal-cards { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 14px; } .cm-portal-card { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; grid-template-areas: "ic head" "text text" "go go"; column-gap: 14px; background: #fff; border: 1px solid var(--cm-border); border-radius: 14px; padding: 16px 20px 0; color: var(--cm-text); overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .cm-portal-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--cm-primary); transition: height .18s ease; } .cm-portal-staff::before { background: var(--cm-brass); } .cm-portal-card:hover, .cm-portal-card:focus-visible { text-decoration: none; color: var(--cm-text); transform: translateY(-2px); border-color: transparent; box-shadow: 0 16px 34px rgba(15,31,58,.16); } .cm-portal-card:hover::before, .cm-portal-card:focus-visible::before { height: 6px; } .cm-portal-card:focus-visible { outline: 3px solid var(--cm-brass); outline-offset: 3px; } .cm-portal-ic { grid-area: ic; width: 44px; height: 44px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; background: var(--cm-primary-50); color: var(--cm-primary); box-shadow: inset 0 0 0 1px var(--cm-primary-100); } .cm-portal-staff .cm-portal-ic { background: var(--cm-brass-50); color: var(--cm-brass-700); box-shadow: inset 0 0 0 1px rgba(212,181,114,.45); } .cm-portal-head { grid-area: head; min-width: 0; } .cm-portal-kicker { display: block; font: 600 9.5px var(--cm-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--cm-text-3); margin-bottom: 3px; } .cm-portal-title { display: block; font-size: 17.5px; font-weight: 600; letter-spacing: -.01em; color: var(--cm-navy); line-height: 1.25; } .cm-portal-text { grid-area: text; font-size: 13px; color: var(--cm-text-2); line-height: 1.55; margin-top: 11px; } .cm-portal-go { grid-area: go; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 10px 0; border-top: 1px solid var(--cm-border); font-size: 13.5px; font-weight: 600; color: var(--cm-primary); } .cm-portal-staff .cm-portal-go { color: var(--cm-brass-700); } .cm-portal-arrow { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; background: var(--cm-primary-50); color: var(--cm-primary); transition: background .18s ease, color .18s ease, transform .18s ease; } .cm-portal-staff .cm-portal-arrow { background: var(--cm-brass-50); color: var(--cm-brass-700); } .cm-portal-card:hover .cm-portal-arrow { background: var(--cm-primary); color: #fff; transform: translateX(3px); } .cm-portal-staff:hover .cm-portal-arrow { background: var(--cm-brass); color: var(--cm-navy); } /* A short window - a 1366x768 laptop leaves about 640px inside the browser - gets the same page, tighter. Height, not width: the constraint here is the fold, and the page must never scroll. */ @media (max-height: 680px) { .cm-fd-bar { min-height: 62px; } .cm-fd-hero { padding-top: 26px; padding-bottom: 26px; } .cm-fd-hero h1 { font-size: 36px; margin-bottom: 12px; } .cm-fd-panel { padding-top: 14px; padding-bottom: 14px; } .cm-fd-choice { padding: 18px 22px 20px; } .cm-fd-features { margin-top: 16px; gap: 8px; } .cm-fd-features li { padding: 9px 13px; } .cm-fd-features small { display: none; } .cm-fd-choice h2 { font-size: 17.5px; } .cm-portal-cards { gap: 10px; margin-top: 12px; } .cm-portal-card { padding-top: 14px; } .cm-portal-title { font-size: 16.5px; } .cm-portal-text { margin-top: 9px; } .cm-portal-go { margin-top: 10px; padding: 9px 0; } .cm-fd-foot { padding-top: 11px; padding-bottom: 11px; } } /* Under ~1100px the hero's words and the choice stop fitting side by side; the choice goes underneath. */ @media (max-width: 1099.98px) { .cm-fd-body { grid-template-columns: 1fr; } .cm-fd-hero { padding: 34px 28px 30px; } .cm-fd-hero h1 { font-size: 32px; } .cm-fd-panel { padding: 0 28px 28px; } .cm-fd-choice { max-width: none; box-shadow: 0 14px 34px rgba(15,31,58,.12); } .cm-fd-photo { opacity: .16; } } @media (max-width: 575.98px) { .cm-fd-bar { padding: 0 16px; min-height: 62px; gap: 10px; } .cm-fd-mark { width: 36px; height: 36px; flex-basis: 36px; } .cm-fd-mark img { max-width: 28px; max-height: 28px; } .cm-fd-name { font-size: 13px; } .cm-fd-hero { padding: 24px 16px 22px; } .cm-fd-hero h1 { font-size: 26px; } .cm-fd-hero p { font-size: 14px; } /* The pitch goes: a phone visitor is almost always a student holding a slip, and what they need is the token card, not a description of the product. */ .cm-fd-features { display: none; } .cm-fd-brand small { display: none; } .cm-fd-panel { padding: 0 16px 20px; } .cm-fd-choice { padding: 20px 18px 22px; border-radius: 14px; } .cm-fd-foot { padding: 12px 16px; font-size: 11.5px; } } /* The centred hero on the STAFF FORM (D77), which is a different page and keeps its split. */ .cm-login .cm-auth-hero { text-align: center; } .cm-login .cm-auth-hero p { margin: 0 auto; } .cm-login .cm-hero-logo { display: flex; width: 104px; height: 104px; border-radius: 18px; margin: 0 auto 26px; box-shadow: 0 0 0 3px var(--cm-brass), 0 12px 32px rgba(0,0,0,.28); } .cm-login .cm-hero-logo img { max-width: 88px; max-height: 88px; } .cm-login .cm-hero-logo span { font-size: 36px; } @media (max-width: 991px) { .cm-login .cm-hero-logo { width: 56px; height: 56px; border-radius: 10px; margin-bottom: 12px; box-shadow: none; } .cm-login .cm-hero-logo img { max-width: 46px; max-height: 46px; } .cm-login .cm-hero-logo span { font-size: 22px; } } /* The back link on the staff form, to the front door. */ .cm-auth-back { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--cm-text-3); margin-bottom: 14px; } .cm-auth-back:hover { color: var(--cm-text); text-decoration: none; }