/* ========================================================================== app.css -- the kanopySIS look, laid over Bootstrap 5.3. Colors, type and spacing come ONLY from the tokens below. They are mapped onto Bootstrap's --bs-* variables, so stock components (cards, tables, forms, dropdowns, DataTables) follow without per-component overrides. Theme: kan-theme.js sets data-bs-theme on (the viewer's saved choice, else the system setting) before this file paints. Light values sit on :root; dark values redefine the same tokens under [data-bs-theme="dark"]. Data colors: --s1..--s8 are the categorical chart slots, in this order only (never cycled, never by rank). The order is CVD-validated against --surface in both themes: re-run the dataviz validator before changing a hex or the order. The first 3 are safe in any chart form. Status colors are reserved for state and always ship with an icon + label (.kan-pill). Class names other code depends on: .kan-top .kan-side .kan-nav .kan-nav-link (.active) .kan-nav-toggle .kan-nav-sub .kan-nav-head .kan-soon .kan-main .kan-page-head .kan-card .kan-stat .kan-module .kan-oc .kan-oc-foot .kan-form-section .kan-row-actions .kan-acts .kan-grid .kan-grid-tools .kan-grid-solid .kan-grid-size .kan-grid-caret .kan-owner-banner, body.kan-auth .kan-auth-card .btn-auth, body.kan-public .kan-public-card .kan-cl-*, and the .kc-* chart classes (kan-charts.js). ========================================================================== */ :root, [data-bs-theme="light"] { /* surfaces + ink: neutrals carry a slight green bias from the brand */ --bg: #f3f6f5; /* page plane */ --surface: #ffffff; /* cards, chart surface */ --surface-2: #f7faf9; /* table header, hover wash */ --line: #e1e8e6; --line-strong: #c7d3d0; /* control borders, chart baseline */ --ink: #0c1a1f; --ink-2: #45565c; --ink-3: #66777d; /* muted: still 4.5:1 on --surface */ --accent: #0b7566; --accent-rgb: 11, 117, 102; --accent-hover: #085e52; --accent-ink: #ffffff; /* text on --accent */ --accent-wash: rgba(11, 117, 102, 0.09); /* chrome: canopy navy in both themes (the brand's own ground) */ --nav-bg: #0b1d24; --nav-ink: #e3eef0; --nav-ink-2: #93abb2; --nav-line: rgba(255, 255, 255, 0.08); --nav-active: rgba(126, 231, 208, 0.12); --nav-hover: rgba(255, 255, 255, 0.04); --nav-bg-light: #0b1d24; /* each mode's sidebar/header colour, wherever the page is (kanPrefs prints chosen ones) */ --nav-bg-dark: #071015; --nav-mark: #7ee7d0; --nav-soon: #8bb8ff; --owner-bg: #b3141c; /* "working inside a corporation as owner" banner: red in both themes */ --owner-ink: #ffffff; /* chart chrome */ --grid: #e9efed; --axis: #c7d3d0; --crosshair: #9aa9ad; /* categorical series, validated order (see header) */ --s1: #0f8a7a; --s2: #eb6834; --s3: #6250d6; --s4: #eda100; --s5: #e87ba4; --s6: #008300; --s7: #2a78d6; --s8: #e34948; /* status: reserved for state, never a series. Same hexes in both themes. */ --good: #0ca30c; --warning: #fab219; --serious: #ec835a; --critical: #d03b3b; --critical-ink: #ffffff; /* text on --critical (the delete warning) */ --up-good-text: #006300; --down-bad-text: #b32d2d; --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --shadow-pop: 0 1px 2px rgba(12, 26, 31, 0.06), 0 8px 24px rgba(12, 26, 31, 0.12); --kan-side-w: 248px; --kan-banner-h: 44px; /* .kan-owner-banner, pinned under the 56px top bar */ /* Bootstrap, driven by the tokens */ --bs-body-font-family: var(--font); --bs-body-font-size: 0.875rem; --bs-body-color: var(--ink); --bs-body-bg: var(--bg); --bs-emphasis-color: var(--ink); --bs-heading-color: var(--ink); --bs-secondary-color: var(--ink-3); --bs-secondary-bg: var(--surface-2); --bs-tertiary-bg: var(--surface-2); --bs-border-color: var(--line); --bs-border-color-translucent: var(--line); --bs-border-radius: var(--r-md); --bs-border-radius-sm: var(--r-sm); --bs-border-radius-lg: var(--r-lg); --bs-primary: var(--accent); --bs-primary-rgb: var(--accent-rgb); --bs-link-color: var(--accent); --bs-link-color-rgb: var(--accent-rgb); --bs-link-hover-color: var(--accent-hover); --bs-link-hover-color-rgb: 8, 94, 82; --bs-focus-ring-color: rgba(var(--accent-rgb), 0.25); --bs-code-color: var(--ink-2); } [data-bs-theme="dark"] { color-scheme: dark; --bg: #0a151b; --surface: #0f1d24; --surface-2: #13252d; --line: #1d323b; --line-strong: #2c4550; --ink: #e6eff0; --ink-2: #a9bcc1; --ink-3: #87999f; --accent: #5fd6bf; --accent-rgb: 95, 214, 191; --accent-hover: #82e3d0; --accent-ink: #052620; --accent-wash: rgba(95, 214, 191, 0.12); --nav-bg: #071015; --nav-line: rgba(255, 255, 255, 0.06); --grid: #1a2d35; --axis: #2c4550; --crosshair: #5d747b; --s1: #2aa894; --s2: #d95926; --s3: #9085e9; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #3987e5; --s8: #e66767; --up-good-text: #3fc33f; --down-bad-text: #ef7b7b; --shadow-pop: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.45); --bs-body-color: var(--ink); --bs-body-bg: var(--bg); --bs-emphasis-color: var(--ink); --bs-heading-color: var(--ink); --bs-secondary-color: var(--ink-3); --bs-secondary-bg: var(--surface-2); --bs-tertiary-bg: var(--surface-2); --bs-border-color: var(--line); --bs-border-color-translucent: var(--line); --bs-primary: var(--accent); --bs-primary-rgb: var(--accent-rgb); --bs-link-color: var(--accent); --bs-link-color-rgb: var(--accent-rgb); --bs-link-hover-color: var(--accent-hover); --bs-link-hover-color-rgb: 130, 227, 208; --bs-focus-ring-color: rgba(var(--accent-rgb), 0.3); } /* ---------- Bootstrap components on the tokens ---------- */ body.kan-app { background: var(--bg); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 600; text-wrap: balance; } .fw-bold { font-weight: 600 !important; } .card { --bs-card-bg: var(--surface); --bs-card-border-color: var(--line); --bs-card-border-radius: var(--r-lg); --bs-card-cap-bg: var(--surface-2); } .dropdown-menu { --bs-dropdown-bg: var(--surface); --bs-dropdown-border-color: var(--line); --bs-dropdown-link-hover-bg: var(--surface-2); --bs-dropdown-link-active-bg: var(--accent); --bs-dropdown-link-active-color: var(--accent-ink); --bs-dropdown-box-shadow: var(--shadow-pop); box-shadow: var(--shadow-pop); font-size: 0.875rem; } .offcanvas { --bs-offcanvas-bg: var(--surface); --bs-offcanvas-border-color: var(--line); } .modal { --bs-modal-bg: var(--surface); --bs-modal-border-color: var(--line); } .toast { --bs-toast-bg: var(--surface); --bs-toast-border-color: var(--line); --bs-toast-box-shadow: var(--shadow-pop); } .list-group { --bs-list-group-bg: transparent; --bs-list-group-border-color: var(--line); --bs-list-group-color: var(--ink); --bs-list-group-active-bg: var(--accent); --bs-list-group-active-border-color: var(--accent); --bs-list-group-active-color: var(--accent-ink); } .pagination { --bs-pagination-bg: var(--surface); --bs-pagination-border-color: var(--line); --bs-pagination-color: var(--ink-2); --bs-pagination-hover-bg: var(--surface-2); --bs-pagination-hover-color: var(--ink); --bs-pagination-hover-border-color: var(--line); --bs-pagination-active-bg: var(--accent); --bs-pagination-active-border-color: var(--accent); --bs-pagination-active-color: var(--accent-ink); --bs-pagination-disabled-bg: var(--surface); --bs-pagination-disabled-border-color: var(--line); --bs-pagination-focus-box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); } .btn { --bs-btn-font-size: 0.875rem; --bs-btn-font-weight: 500; --bs-btn-border-radius: var(--r-md); --bs-btn-focus-box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); } .btn-primary { --bs-btn-color: var(--accent-ink); --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-color: var(--accent-ink); --bs-btn-hover-bg: var(--accent-hover); --bs-btn-hover-border-color: var(--accent-hover); --bs-btn-active-color: var(--accent-ink); --bs-btn-active-bg: var(--accent-hover); --bs-btn-active-border-color: var(--accent-hover); --bs-btn-disabled-color: var(--accent-ink); --bs-btn-disabled-bg: var(--accent); --bs-btn-disabled-border-color: var(--accent); } .btn-outline-primary { --bs-btn-color: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-color: var(--accent-ink); --bs-btn-hover-bg: var(--accent); --bs-btn-hover-border-color: var(--accent); --bs-btn-active-color: var(--accent-ink); --bs-btn-active-bg: var(--accent-hover); --bs-btn-active-border-color: var(--accent-hover); --bs-btn-disabled-color: var(--accent); --bs-btn-disabled-border-color: var(--accent); } .btn-outline-secondary { --bs-btn-color: var(--ink-2); --bs-btn-border-color: var(--line-strong); --bs-btn-hover-color: var(--ink); --bs-btn-hover-bg: var(--surface-2); --bs-btn-hover-border-color: var(--line-strong); --bs-btn-active-color: var(--ink); --bs-btn-active-bg: var(--surface-2); --bs-btn-active-border-color: var(--ink-3); } .form-control, .form-select { background-color: var(--surface); border-color: var(--line-strong); color: var(--ink); font-size: 0.875rem; } .form-control::placeholder { color: var(--ink-3); } .form-control:focus, .form-select:focus { background-color: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); color: var(--ink); } .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); } .form-check-input:focus { border-color: var(--accent); box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); } .form-label { font-weight: 500; color: var(--ink-2); } /* ---------- tables: the grid look (same shape as iPLEX's "IP Grid") ---------- EVERY .table gets it, DataTables or plain server markup, so there is one look: - a full grid: an outer border and a seam on every cell, square corners; - the header filled with the accent in --accent-ink, NOT bold and NOT capitals, its seams drawn in that ink (a grey line on the accent is a scar); - roomy rows (46px, 38px for .table-sm), one ink for every cell, a hover wash. EVERY table is also a grid, from app.js (kanCrud's and any other .table with a ): toolbar on top -- rows + CSV as ONE solid accent group, then the screen's New button, search on the right -- and the pager below: count left, pages joined right. */ .table { --bs-table-bg: var(--surface); --bs-table-color: var(--ink); --bs-table-border-color: var(--line); --bs-table-striped-bg: var(--surface-2); --bs-table-hover-bg: var(--accent-wash); --bs-table-hover-color: var(--ink); border: 1px solid var(--line); margin-bottom: 0; } .table > :not(caption) > * > * { padding: 0.6rem 0.8rem; border-right: 1px solid var(--line); } .table > :not(caption) > * > :last-child { border-right: 0; } .table > tbody > tr > * { height: 46px; vertical-align: middle; } .table-sm > :not(caption) > * > * { padding: 0.35rem 0.6rem; } .table-sm > tbody > tr > * { height: 38px; } .table > tbody > tr:last-child > * { border-bottom: 0; } .table > tbody > tr:hover > * { --bs-table-bg-state: var(--accent-wash); } /* the fill goes through --bs-table-bg: DataTables paints every cell with it at higher specificity */ table.dataTable { --dt-row-hover: var(--accent-rgb); } .table > thead > tr > * { --bs-table-bg: var(--accent); background-color: var(--accent); color: var(--accent-ink); vertical-align: middle; padding-top: 10px; padding-bottom: 10px; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0; text-transform: none; white-space: nowrap; border-bottom: 1px solid var(--accent); border-right-color: color-mix(in srgb, var(--accent-ink) 30%, transparent); } .table > thead > tr > :last-child { border-right: 0; } .table > thead a { color: var(--accent-ink); } .table td.text-end, .table th.text-end, .table .num, .table .dt-type-numeric { font-variant-numeric: tabular-nums; } /* a column as narrow as what is in it (row actions, icons) */ .table td.kan-row-actions, .table th.kan-row-actions { width: 1%; white-space: nowrap; } /* sort marks: both arrows at the far end of the heading, the active one at full ink */ table.dataTable > thead > tr > th span.dt-column-order { right: 10px; } table.dataTable > thead > tr > th span.dt-column-order::before, table.dataTable > thead > tr > th span.dt-column-order::after { opacity: 0.45; } table.dataTable > thead > tr > th.dt-ordering-asc span.dt-column-order::before, table.dataTable > thead > tr > th.dt-ordering-desc span.dt-column-order::after { opacity: 1; } table.dataTable > thead > tr > th.dt-ordering-asc span.dt-column-order::after, table.dataTable > thead > tr > th.dt-ordering-desc span.dt-column-order::before { opacity: 0.25; } table.dataTable > thead > tr > th.dt-orderable-asc:hover, table.dataTable > thead > tr > th.dt-orderable-desc:hover { outline: 0; --bs-table-bg: var(--accent-hover); background-color: var(--accent-hover); } table.dataTable > thead > tr > th:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -3px; } /* the grid's toolbar: sits on the table, controls joined and square like the grid */ div.dt-container > .dt-layout-row:first-child { margin-top: 0 !important; } div.dt-container > .dt-layout-table { margin-top: 2px !important; } div.dt-container .dt-layout-table > div { overflow-x: auto; } /* a wide grid scrolls, the toolbar stays */ div.dt-container .dt-layout-start, div.dt-container .dt-layout-end { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; } .kan-grid-tools { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; } .kan-grid-tools .btn-group > * + * { margin-left: -1px; } .kan-grid-solid .form-select, .kan-grid-solid > .btn { border-radius: 0; background-color: var(--accent); color: var(--accent-ink); font-weight: 600; border: 1px solid color-mix(in srgb, var(--accent-ink) 28%, transparent); } .kan-grid-solid > .btn:hover, .kan-grid-solid > .btn:focus-visible { background-color: var(--accent-hover); color: var(--accent-ink); } /* the rows select draws its arrow as an icon in --accent-ink (Bootstrap's is a dark glyph on the accent) */ .kan-grid-size { position: relative; display: flex; } .kan-grid-size .form-select { width: auto; cursor: pointer; padding-right: 2rem; --bs-form-select-bg-img: none; background-image: none; } .kan-grid-size .form-select:focus { border-color: var(--accent-ink); } .kan-grid-size .form-select option { background: var(--surface); color: var(--ink); font-weight: 400; } .kan-grid-caret { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--accent-ink); font-size: 0.7rem; } .kan-grid-tools .btn-primary { border-radius: 0; } div.dt-container div.dt-search input { margin-left: 0; width: 24ch; max-width: 60vw; border-radius: 0; background-color: var(--surface); border: 1px solid var(--accent); color: var(--ink); } div.dt-container div.dt-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); } /* the pager: the count on the left, the pages as one joined square group on the right */ div.dt-container .dt-info { color: var(--ink-3); font-size: 0.8125rem; padding-top: 0 !important; } div.dt-container > .dt-layout-row:last-child { align-items: center; margin-top: 12px !important; } div.dt-container div.dt-paging ul.pagination { margin: 0; --bs-pagination-border-radius: 0; --bs-pagination-font-size: 0.8125rem; --bs-pagination-padding-x: 0.7rem; --bs-pagination-padding-y: 0.3rem; } div.dt-container div.dt-paging .page-link { min-width: 34px; text-align: center; font-weight: 600; } div.dt-container div.dt-paging .page-item.active .page-link { color: var(--accent-ink); } /* a row's buttons: one joined group of icon buttons, not loose ones */ .kan-acts { display: inline-flex; } .kan-acts > .btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 32px; padding: 0; } .kan-acts > .btn > .bi { font-size: 1rem; line-height: 1; } /* a slot this row has no button for (app.js): the group stays whole and the icons stay in columns */ .kan-acts > .kan-act-gap, .kan-acts > .kan-act-gap:hover { pointer-events: none; background: transparent; } /* segmented choice = Bootstrap btn-check radios in a .btn-group */ .btn-check:checked + .btn-outline-secondary { color: var(--ink); background: var(--accent-wash); border-color: var(--accent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .mono { font-family: var(--mono); font-size: 0.93em; } .num { font-variant-numeric: tabular-nums; } /* ---------- top bar ---------- */ .kan-top { position: sticky; top: 0; z-index: 1030; display: flex; align-items: center; gap: 14px; height: 56px; padding: 0 18px; background: var(--nav-bg); color: var(--nav-ink); border-bottom: 1px solid var(--nav-line); } .kan-logo { color: var(--nav-mark); font-weight: 600; letter-spacing: 0.01em; text-decoration: none; font-size: 1.0625rem; } /* the name is written kanopySIS: never uppercased */ .kan-logo:hover { color: var(--nav-ink); } .kan-where { color: var(--nav-ink-2); font-size: 0.875rem; border-left: 1px solid var(--nav-line); padding-left: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* the clock beside the theme button (app.js startClock): the viewer's date and time, ticking */ .kan-clock { display: inline-flex; align-items: center; gap: 8px; color: var(--nav-ink-2); font-size: 0.8125rem; font-variant-numeric: tabular-nums; white-space: nowrap; } .kan-clock .bi { color: var(--nav-mark); } .kan-clock [data-clock-time] { color: var(--nav-ink); font-weight: 500; min-width: 7.5ch; } @media (max-width: 767.98px) { .kan-clock-date { display: none; } } @media (max-width: 400px) { .kan-clock { display: none; } .kan-theme-btn { margin-left: auto; } } .kan-user, .kan-burger, .kan-theme-btn { color: var(--nav-ink); border: 1px solid var(--nav-line); } .kan-user:hover, .kan-burger:hover, .kan-theme-btn:hover, .kan-user:focus-visible, .kan-burger:focus-visible, .kan-theme-btn:focus-visible { color: var(--nav-ink); border-color: var(--nav-mark); background: var(--nav-active); } .kan-user.show { color: var(--nav-ink); border-color: var(--nav-mark); } .kan-theme-btn .bi-sun { display: none; } [data-bs-theme="dark"] .kan-theme-btn .bi-sun { display: inline; } [data-bs-theme="dark"] .kan-theme-btn .bi-moon { display: none; } /* stays pinned under the top bar; z-index under .kan-top (1030) so the help bubble stays on top of it */ .kan-owner-banner { position: sticky; top: 56px; z-index: 1029; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 0; min-height: var(--kan-banner-h); padding: 6px 16px; background: var(--owner-bg); color: var(--owner-ink); font-size: 0.875rem; } /* ---------- shell ---------- */ .kan-shell { display: flex; min-height: calc(100vh - 56px); } /* !important: Bootstrap's .offcanvas-lg forces a transparent background from lg up */ .kan-side { width: var(--kan-side-w); flex: 0 0 var(--kan-side-w); background-color: var(--nav-bg) !important; color: var(--nav-ink-2); } @media (min-width: 992px) { .kan-side { position: sticky; top: 56px; height: calc(100vh - 56px); overflow-y: auto; } /* with the owner banner: one fixed-height line, and the sidebar sticks below it */ .kan-owner-banner { height: var(--kan-banner-h); flex-wrap: nowrap; padding-top: 0; padding-bottom: 0; } .kan-owner-banner ~ .kan-shell .kan-side { top: calc(56px + var(--kan-banner-h)); height: calc(100vh - 56px - var(--kan-banner-h)); } } /* the sidebar column (lg up): the divider on its edge drags to resize it (--kan-side-cur, saved per person) and clicks to fold it to an icon rail (body.kan-rail); app.js "Sidebar". Phones keep the full-width menu. */ .kan-side-grip { display: none; } .kan-nav-link > span:not(.badge) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (min-width: 992px) { .kan-side { width: var(--kan-side-cur, var(--kan-side-w)); flex-basis: var(--kan-side-cur, var(--kan-side-w)); overflow-x: hidden; transition: flex-basis 0.15s, width 0.15s; } body.kan-side-resizing .kan-side { transition: none; } body.kan-side-resizing { cursor: col-resize; user-select: none; } .kan-side-grip { display: block; position: sticky; top: 56px; align-self: flex-start; z-index: 6; height: calc(100vh - 56px); flex: 0 0 12px; margin: 0 -6px; cursor: col-resize; touch-action: none; } .kan-owner-banner ~ .kan-shell .kan-side-grip { top: calc(56px + var(--kan-banner-h)); height: calc(100vh - 56px - var(--kan-banner-h)); } .kan-side-grip::before { content: ''; position: absolute; top: 0; bottom: 0; left: 5px; width: 2px; background: transparent; transition: background 0.15s; } .kan-side-grip:hover::before, .kan-side-grip:focus-visible::before, body.kan-side-resizing .kan-side-grip::before { background: var(--accent); } .kan-side-grip:focus-visible { outline: none; } .kan-side-knob { position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink-2); box-shadow: var(--shadow-pop); font-size: 0.75rem; pointer-events: none; transition: color 0.15s, border-color 0.15s; } .kan-side-knob .bi { transition: transform 0.15s; } .kan-side-grip:hover .kan-side-knob, .kan-side-grip:focus-visible .kan-side-knob { color: var(--accent); border-color: var(--accent); } body.kan-rail .kan-side-knob .bi { transform: rotate(180deg); } /* the icon rail: icons only (each names itself in a tooltip), sections as thin rules, unread counts on the icon */ body.kan-rail { --kan-side-cur: 64px; } body.kan-rail .kan-nav { padding: 12px 8px; } body.kan-rail .kan-nav-headbtn, body.kan-rail .kan-nav-caret, body.kan-rail .kan-soon, body.kan-rail .kan-nav-sub { display: none !important; } body.kan-rail .kan-nav-head.kan-nav-fold { margin: 8px 4px 0; padding-top: 8px; border-top: 1px solid var(--nav-line); } body.kan-rail .kan-nav > .kan-nav-fold:first-child { margin-top: 0; padding-top: 0; border-top: 0; } body.kan-rail .kan-nav-sec { display: flex !important; height: auto !important; margin: 0; } body.kan-rail .kan-nav-link { position: relative; justify-content: center; padding: 9px 0; } body.kan-rail .kan-nav-link > span:not(.badge) { position: absolute; width: 1px; height: 1px; clip: rect(0 0 0 0); } body.kan-rail .kan-nav-link > .kan-nav-count { position: absolute; top: 1px; right: 2px; margin: 0; padding: 2px 4px; font-size: 0.625rem; } } @media (min-width: 992px) and (prefers-reduced-motion: reduce) { .kan-side, .kan-side-knob, .kan-side-knob .bi { transition: none; } } .kan-side.offcanvas-lg { --bs-offcanvas-bg: var(--nav-bg); --bs-offcanvas-color: var(--nav-ink-2); --bs-offcanvas-width: var(--kan-side-w); } .kan-nav { list-style: none; margin: 0; padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; } .kan-nav-head { margin: 16px 8px 4px; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nav-ink-2); } .kan-nav-link { display: flex; align-items: center; gap: 12px; padding: 7px 10px; border-radius: var(--r-md); color: var(--nav-ink-2); text-decoration: none; font-size: 0.875rem; } .kan-nav-link i { font-size: 1rem; line-height: 1; } .kan-nav-link:hover { background: var(--nav-hover); color: var(--nav-ink); } .kan-nav-link.active { background: var(--nav-active); color: var(--nav-ink); } .kan-nav-link.active i { color: var(--nav-mark); } /* a fold-out group (kanLayout::_nav children): the toggle, then its pages indented under the label */ .kan-nav-toggle { width: 100%; border: 0; background: none; text-align: left; } .kan-nav-toggle .kan-nav-caret { margin-left: auto; font-size: 0.75rem; transition: transform 0.15s; } .kan-nav-toggle .kan-nav-count + .kan-nav-caret { margin-left: 8px; } /* a folded group still shows its unread count */ .kan-nav-toggle[aria-expanded="true"] { color: var(--nav-ink); } .kan-nav-toggle[aria-expanded="true"] .kan-nav-caret { transform: rotate(180deg); } .kan-nav-sub { list-style: none; margin: 2px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 2px; } .kan-nav-sub .kan-nav-link { padding-left: 38px; } @media (prefers-reduced-motion: reduce) { .kan-nav-toggle .kan-nav-caret { transition: none; } } /* every section folds on its heading (open while one of its pages is showing); sections, and the pages inside one, drag into each person's own order (app.js "Sidebar") */ .kan-nav-head.kan-nav-fold { margin: 12px 0 0; } .kan-nav > .kan-nav-fold:first-child { margin-top: 0; } .kan-nav a, .kan-nav button { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } .kan-nav .is-dragging { position: relative; z-index: 1; border-radius: var(--r-md); background: var(--nav-active); box-shadow: var(--shadow-pop); outline: 1px dashed var(--nav-mark); outline-offset: -1px; } body.kan-nav-dragging, body.kan-nav-dragging .kan-nav * { cursor: grabbing; } .kan-nav-headbtn { display: flex; align-items: center; width: 100%; padding: 6px 8px; border: 0; border-radius: var(--r-md); background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; } .kan-nav-headbtn:hover, .kan-nav-headbtn[aria-expanded="true"] { color: var(--nav-ink); } .kan-nav-headbtn:hover { background: var(--nav-hover); } .kan-nav-headbtn:focus-visible { outline: 2px solid var(--nav-mark); outline-offset: 1px; } .kan-nav-headbtn .kan-nav-caret { margin-left: auto; font-size: 0.75rem; transition: transform 0.15s; } .kan-nav-headbtn[aria-expanded="true"] .kan-nav-caret { transform: rotate(180deg); } .kan-nav-sec { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--bs-body-font-size); font-weight: 400; letter-spacing: normal; text-transform: none; } @media (prefers-reduced-motion: reduce) { .kan-nav-headbtn .kan-nav-caret { transition: none; } } .kan-soon { background: rgba(139, 184, 255, 0.14); color: var(--nav-soon); font-weight: 500; font-size: 0.6875rem; } .kan-main { flex: 1; min-width: 0; padding: 24px clamp(16px, 3vw, 32px) 48px; } .kan-page-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; } .kan-page-head h1 { font-size: 1.625rem; font-weight: 600; letter-spacing: -0.01em; margin: 0; color: var(--ink); } .kan-page-head > :not(h1) { margin-left: auto; } /* a page's buttons (kanLayout page(actions)): one group, together at the right */ .kan-page-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; } .kan-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: none; } /* ---------- dashboard tiles ---------- */ .kan-stat { display: block; height: 100%; padding: 16px 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: inherit; transition: border-color 0.12s, background-color 0.12s; } a.kan-stat:hover { border-color: var(--accent); color: inherit; } .kan-stat .num { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); line-height: 1.15; font-variant-numeric: normal; } .kan-stat .lbl { color: var(--ink-2); font-size: 0.8125rem; font-weight: 500; margin-top: 2px; } .kan-stat i { float: right; font-size: 1.125rem; color: var(--ink-3); } a.kan-stat:hover i { color: var(--accent); } .kan-stat .sub { color: var(--ink-3); font-size: 0.75rem; margin-top: 2px; } /* Needs attention with something urgent in it: the state colour on its mark and line */ .kan-stat.is-urgent i, .kan-stat.is-urgent .sub { color: var(--critical); } .kan-stat.is-urgent .sub { font-weight: 600; } /* the dashboard's news slider (corp/dashboard.pm): Bootstrap's carousel, its controls a row under the story; long stories are cut to five lines (Read it in Social Next has the rest) */ /* every story in the same grid cell: the card is as tall as the tallest one and never jumps between slides; the hidden ones keep their space (visibility), the one sliding in shows */ .kan-news .carousel-inner { display: grid; } .kan-news .carousel-item { display: flex; flex-direction: column; grid-area: 1 / 1; float: none; margin-right: 0; } .kan-news .carousel-item:not(.active):not(.carousel-item-next):not(.carousel-item-prev) { visibility: hidden; } .kan-news .carousel-item > a:last-child { margin-top: auto; align-self: flex-start; } .kan-news .kan-news-body { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 6px; } .kan-news .kan-news-body > :last-child { margin-bottom: 0; } .kan-news-nav { display: flex; align-items: center; gap: 10px; margin-top: 12px; } .kan-news .carousel-indicators { position: static; flex: 1; justify-content: center; gap: 8px; margin: 0; padding: 0; } .kan-news .carousel-indicators [data-bs-target] { width: 8px; height: 8px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--line-strong); opacity: 1; transition: background-color 0.15s; } .kan-news .carousel-indicators .active { background: var(--accent); } /* Back in a view panel's header (app.js openView: a panel opened from inside another) */ .kan-oc-back { border: 0; background: none; color: inherit; opacity: 0.8; font-size: 1.15rem; line-height: 1; padding: 4px 8px 4px 0; margin-right: 4px; } .kan-oc-back:hover { opacity: 1; } .kan-oc-back:focus-visible { outline: 2px solid var(--nav-mark); outline-offset: 2px; } /* owner dashboard tiles: a series colour each (--k), a 12-week trend, and the whole tile opens its full list (data-view-size="full"). Text stays --ink; --k only paints marks. */ .kan-kpi { --k: var(--accent); position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; padding: 18px 20px 14px; overflow: hidden; text-align: left; font: inherit; color: var(--ink); cursor: pointer; border-radius: var(--r-lg); border: 1px solid var(--line); border-top: 4px solid var(--k); background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--k) 14%, transparent) 0%, transparent 55%), var(--surface); transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; } .kan-kpi.is-s1 { --k: var(--s1); } .kan-kpi.is-s2 { --k: var(--s2); } .kan-kpi.is-s3 { --k: var(--s3); } .kan-kpi.is-s4 { --k: var(--s4); } a.kan-kpi { text-decoration: none; } a.kan-kpi:hover { color: var(--ink); } .kan-kpi:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); border-color: color-mix(in srgb, var(--k) 45%, var(--line)); } .kan-kpi:focus-visible { outline: 3px solid var(--k); outline-offset: 2px; } .kan-kpi-icon { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; font-size: 1.25rem; color: var(--k); background: color-mix(in srgb, var(--k) 16%, var(--surface)); transition: transform 0.15s; } .kan-kpi:hover .kan-kpi-icon { transform: rotate(-6deg) scale(1.06); } .kan-kpi-num { font-size: 2.5rem; font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .kan-kpi-lbl { margin-top: 4px; font-size: 0.9375rem; font-weight: 600; } .kan-kpi-sub { margin-top: 2px; font-size: 0.8125rem; color: var(--ink-3); } .kan-kpi-spark { display: block; margin: 12px -4px 4px; min-height: 36px; } .kan-kpi .kan-kpi-spark .kc-line { stroke: var(--k); stroke-width: 2; } .kan-kpi .kan-kpi-spark .kc-area { fill: var(--k); fill-opacity: 0.14; } .kan-kpi .kan-kpi-spark .kc-dot { fill: var(--k); stroke: var(--surface); stroke-width: 2; } .kan-kpi-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); font-size: 0.8125rem; } .kan-kpi-up { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; color: var(--up-good-text); } .kan-kpi-up.is-flat { color: var(--ink-3); font-weight: 400; } .kan-kpi-go { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-weight: 500; color: var(--ink-2); } .kan-kpi-go i { transition: transform 0.15s; } .kan-kpi:hover .kan-kpi-go { color: var(--ink); } .kan-kpi:hover .kan-kpi-go i { transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { .kan-kpi, .kan-kpi-icon, .kan-kpi-go i { transition: none; } .kan-kpi:hover, .kan-kpi:hover .kan-kpi-icon, .kan-kpi:hover .kan-kpi-go i { transform: none; } } .kan-module { height: 100%; padding: 20px; border-radius: var(--r-lg); background: transparent; border: 1px dashed var(--line-strong); transition: border-color 0.12s; } a:hover > .kan-module { border-color: var(--accent); } .kan-module h3 { font-size: 1rem; font-weight: 600; margin: 10px 0 4px; } .kan-module p { color: var(--ink-3); font-size: 0.875rem; margin: 0; } .kan-module i { font-size: 1.25rem; color: var(--accent); } .kan-module .kan-soon { background: var(--accent-wash); color: var(--ink-2); } /* ---------- offcanvas form ---------- */ .kan-oc { --bs-offcanvas-width: min(560px, 100vw); } /* every side panel's and every modal's header wears the top bar's colours (--nav-*, the person's preferred colours), so it follows them wherever they change; the X is drawn in currentColor so it reads on any of them. The red delete confirm keeps its red header. */ .offcanvas > .offcanvas-header, .modal .modal-header { background: var(--nav-bg); color: var(--nav-ink); border-bottom: 1px solid var(--nav-line); } .offcanvas > .offcanvas-header .offcanvas-title, .modal .modal-header .modal-title { color: inherit; } .modal .modal-header .text-muted, .modal .modal-header .form-text { color: var(--nav-ink-2) !important; } .offcanvas > .offcanvas-header .btn-close, .modal .modal-header .btn-close { --bs-btn-close-bg: none; --bs-btn-close-opacity: 0.75; --bs-btn-close-hover-opacity: 1; filter: none; color: inherit; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e") center / 1em auto no-repeat; mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e") center / 1em auto no-repeat; } .offcanvas > .offcanvas-header .btn-close:focus-visible, .modal .modal-header .btn-close:focus-visible { outline: 2px solid var(--nav-mark); outline-offset: 2px; box-shadow: none; } .kan-oc-foot { padding: 14px 16px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; } /* Save at the right */ /* checkbox list (kanCrud multiselect): one bordered box, a row per choice, optional note under each */ .kan-checks { border: 1px solid var(--line-strong); border-radius: var(--bs-border-radius); background: var(--surface); } .kan-checks.is-invalid { border-color: var(--bs-form-invalid-border-color); } .kan-checks.is-invalid > .invalid-feedback { display: block; padding: 0 12px 8px; } .kan-checks-filter { border: 0; border-bottom: 1px solid var(--line); border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0; } .kan-checks-filter:focus { box-shadow: none; border-bottom-color: var(--accent); } .kan-checks-list { padding: 4px; } .kan-checks-filter + .kan-checks-list { max-height: 15rem; overflow-y: auto; } /* only a long list scrolls */ .kan-check { display: flex; gap: 10px; align-items: flex-start; padding: 7px 8px; border-radius: calc(var(--bs-border-radius) - 2px); cursor: pointer; margin: 0; } .kan-check:hover { background: var(--surface-2); } .kan-check:has(.form-check-input:checked) { background: var(--accent-wash); } .kan-check .form-check-input { margin: 2px 0 0; flex: none; border-color: var(--ink-3); } .kan-check-text { display: flex; flex-direction: column; min-width: 0; } .kan-check-label { color: var(--ink); font-size: 0.875rem; } .kan-check-note { color: var(--ink-3); font-size: 0.8125rem; } .kan-check-none { color: var(--ink-3); font-size: 0.875rem; padding: 7px 8px; } .kan-form-section { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); font-weight: 600; color: var(--ink); font-size: 0.875rem; } /* ---------- figures (kanWeb::delta / pill, kan-charts.js) ---------- */ .kan-hero { font-size: 3rem; font-weight: 600; line-height: 1; letter-spacing: -0.02em; } .kan-label { color: var(--ink-2); font-size: 0.8125rem; font-weight: 500; } .kan-sub { color: var(--ink-3); font-size: 0.8125rem; } .kan-delta { display: inline-flex; align-items: center; gap: 3px; font-size: 0.8125rem; font-weight: 500; white-space: nowrap; } .kan-delta .vs { color: var(--ink-3); font-weight: 400; } .kan-delta.is-good { color: var(--up-good-text); } .kan-delta.is-bad { color: var(--down-bad-text); } .kan-delta.is-flat { color: var(--ink-2); } /* status: always icon + label, never color alone */ .kan-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 6px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: 0.75rem; font-weight: 500; white-space: nowrap; } .is-good > .bi:first-child { color: var(--good); } .is-warning > .bi:first-child { color: var(--warning); } .is-serious > .bi:first-child { color: var(--serious); } .is-critical > .bi:first-child { color: var(--critical); } /* things that need someone's attention, worst first */ .kan-attn { list-style: none; margin: 0; padding: 0; } .kan-attn li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line); } .kan-attn li:first-child { border-top: 0; padding-top: 0; } .kan-attn li > .bi { font-size: 1.05rem; line-height: 1.3; } .kan-attn-sev { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); } .kan-attn-title { font-weight: 500; } .kan-attn-meta { color: var(--ink-3); font-size: 0.8125rem; } /* meter: fill carries severity, the track is a lighter step of the same hue */ .kan-meter { --meter: var(--accent); display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: color-mix(in srgb, var(--meter) 16%, var(--surface)); } .kan-meter > span { display: block; height: 100%; background: var(--meter); } .kan-meter.is-warning { --meter: var(--warning); } .kan-meter.is-critical { --meter: var(--critical); } /* inline share bar inside a table cell */ .kan-cellbar { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; width: 100%; } .kan-cellbar i { display: block; width: 64px; height: 6px; border-radius: 3px; background: var(--grid); overflow: hidden; } .kan-cellbar i::before { content: ""; display: block; height: 100%; width: var(--v, 0%); background: var(--s1); border-radius: 3px; } /* charts */ .kc { position: relative; min-width: 0; } .kc svg { display: block; overflow: visible; } .kc:focus-visible { outline-offset: 4px; border-radius: var(--r-sm); } .kc.is-refreshing svg { opacity: 0.45; transition: opacity 0.15s; } .kc-s1 { --c: var(--s1); } .kc-s2 { --c: var(--s2); } .kc-s3 { --c: var(--s3); } .kc-s4 { --c: var(--s4); } .kc-s5 { --c: var(--s5); } .kc-s6 { --c: var(--s6); } .kc-s7 { --c: var(--s7); } .kc-s8 { --c: var(--s8); } .kc-grid { stroke: var(--grid); stroke-width: 1; shape-rendering: crispEdges; } .kc-base { stroke: var(--axis); stroke-width: 1; shape-rendering: crispEdges; } .kc-tick { fill: var(--ink-3); font-size: 11px; font-family: var(--font); font-variant-numeric: tabular-nums; } .kc-label { fill: var(--ink); font-size: 12px; font-weight: 600; font-family: var(--font); font-variant-numeric: tabular-nums; } .kc-line { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .kc-area { fill: var(--c); fill-opacity: 0.1; stroke: none; } .kc-dot { fill: var(--c); stroke: var(--surface); stroke-width: 2; } .kc-bar { fill: var(--c); transition: opacity 0.12s; } .kc-dim .kc-bar { opacity: 0.35; } .kc-dim .kc-col.is-on .kc-bar { opacity: 1; } .kc-hit { fill: transparent; cursor: crosshair; } .kc-xhair { stroke: var(--crosshair); stroke-width: 1; shape-rendering: crispEdges; pointer-events: none; } .kc-spark .kc-line { stroke: var(--ink-3); stroke-width: 1.5; } .kc-spark .kc-area { fill: var(--ink-3); fill-opacity: 0.08; } .kc-spark .kc-dot { fill: var(--accent); } .kc-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; font-size: 0.8125rem; color: var(--ink-2); } .kc-legend li { display: inline-flex; align-items: center; gap: 6px; } .kc-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--c); } .kc-key.is-line { width: 14px; height: 2px; border-radius: 1px; } .kc-tip { position: absolute; z-index: 5; top: 0; left: 0; min-width: 150px; padding: 8px 12px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-pop); font-size: 0.8125rem; pointer-events: none; } .kc-tip-head { color: var(--ink-3); font-size: 0.75rem; margin-bottom: 4px; } .kc-tip-row { display: grid; grid-template-columns: 14px auto 1fr; align-items: center; gap: 6px; } .kc-tip-row b { font-weight: 600; font-variant-numeric: tabular-nums; } .kc-tip-row span { color: var(--ink-2); } .kc-tip-row .kc-key.is-line { width: 12px; } .kc-tip-total { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; } /* card view switch: chart <-> its table twin ([data-view-toggle], kan-theme.js) */ .view-table { display: none; } [data-view="table"] .view-table { display: block; } [data-view="table"] .view-chart { display: none; } @media (forced-colors: active) { .kc-bar, .kc-key, .kan-meter > span { forced-color-adjust: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } /* ---------- sign-in / set password / errors (brand ground, both themes) ---------- */ body.kan-auth { min-height: 100vh; margin: 0; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at top, #122d47 0%, #0b2237 30%, #06131f 100%); font-family: var(--font); color: #edf7ff; } .kan-auth-card { width: min(420px, 100%); padding: 32px 28px; border-radius: 16px; background: rgba(10, 24, 38, 0.86); border: 1px solid rgba(126, 231, 208, 0.18); box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35); } .kan-auth-card .kan-logo { display: block; text-align: center; margin-bottom: 8px; } .kan-auth-card h1 { font-size: 1.375rem; text-align: center; margin: 0 0 22px; font-weight: 600; color: #edf7ff; } .kan-auth-card .form-label { color: #b7d8eb; font-size: 0.875rem; } .kan-auth-card .form-control { background: rgba(255, 255, 255, 0.06); border-color: rgba(183, 216, 235, 0.3); color: #fff; } .kan-auth-card .form-control:focus { background: rgba(255, 255, 255, 0.1); border-color: #7ee7d0; color: #fff; box-shadow: 0 0 0 .2rem rgba(126, 231, 208, 0.25); } .kan-auth-card .btn-auth { width: 100%; padding: 10px; border-radius: var(--r-md); font-weight: 600; border: 0; color: #052620; background: #7ee7d0; } .kan-auth-card .btn-auth:hover { background: #a3efdf; color: #052620; } .kan-auth-card p, .kan-auth-card .small { color: #b7d8eb; } .kan-auth-card a { color: #7ee7d0; } .kan-auth-card .alert { font-size: 0.875rem; } /* ---------- public pages (change log) ---------- */ body.kan-public { place-items: start center; padding-top: 48px; } .kan-public-card { width: min(820px, 100%); padding: clamp(24px, 4vw, 44px); border-radius: 16px; background: rgba(10, 24, 38, 0.86); border: 1px solid rgba(126, 231, 208, 0.18); box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35); } .kan-public-card h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 600; letter-spacing: -0.02em; margin: 10px 0 6px; color: #edf7ff; } .kan-public-lead { color: #b7d8eb; } .kan-public-card a { color: #7ee7d0; } .kan-cl-month { margin: 30px 0 4px; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; } .kan-cl-row { display: flex; gap: 16px; padding: 14px 0; line-height: 1.6; } .kan-cl-date { flex: 0 0 64px; font-size: 0.875rem; padding-top: 2px; font-variant-numeric: tabular-nums; } .kan-public-card .kan-cl-month { color: #7ee7d0; } .kan-public-card .kan-cl-row { border-bottom: 1px solid rgba(183, 216, 235, 0.14); color: #dcebf5; } .kan-public-card .kan-cl-date { color: #8fb0c6; } .kan-public-card .kan-cl-badge { background: rgba(126, 231, 208, 0.16); color: #7ee7d0; } .kan-public-card .kan-cl-row strong { color: #fff; } /* ---------- About kanopySIS (profile menu): full-width panel, tokens only ---------- */ .kan-about-oc { --bs-offcanvas-width: 100vw; display: flex; flex-direction: row; border: 0; overflow: hidden; } .kan-about-text { flex: 0 0 30%; height: 100%; overflow-y: auto; padding: 3rem 2.5rem; background-color: var(--nav-bg); color: var(--nav-ink); } .kan-about-brand { margin-bottom: 2rem; font-size: 1.25rem; font-weight: 600; letter-spacing: 0.01em; color: var(--nav-mark); } .kan-about-h2 { font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; color: var(--nav-ink); } .kan-about-text p { font-size: 0.92rem; line-height: 1.6; color: var(--nav-ink-2); } .kan-about-links { margin-top: 1.75rem; display: flex; flex-direction: column; gap: 2px; } .kan-about-link { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: var(--r-md); background: none; text-align: left; font-size: 0.92rem; color: var(--nav-ink-2); text-decoration: none; } .kan-about-link:hover, .kan-about-link:focus-visible { color: var(--nav-ink); background: var(--nav-hover); } .kan-about-link.active { color: var(--nav-ink); font-weight: 600; background: var(--nav-active); } .kan-about-link.active i { color: var(--nav-mark); } .kan-about-content { flex: 1 1 70%; position: relative; overflow: hidden; background-color: var(--bg); } .kan-about-pane { position: absolute; inset: 0; overflow-y: auto; } .kan-about-img { background: var(--nav-bg) center / contain no-repeat; } /* only while open: a closed offcanvas is merely hidden, and every page carries this one */ .kan-about-oc.showing .kan-about-img, .kan-about-oc.show .kan-about-img { background-image: url(/web/og.png); } .kan-about-cl { padding: 2.5rem 3rem; color: var(--ink); } .kan-about-cl .kan-cl-month { color: var(--accent); } .kan-about-cl .kan-cl-row { border-bottom: 1px solid var(--line); } .kan-about-cl .kan-cl-date { color: var(--ink-2); } .kan-about-cl .kan-cl-badge { background-color: var(--accent-wash); color: var(--accent); } .kan-about-close { position: absolute; top: 1.25rem; right: 1.25rem; z-index: 5; } /* Change Log months fold (all closed); kanopySIS Training tiles + table */ .kan-cl-fold { border-bottom: 1px solid var(--line); } .kan-cl-fold > summary { display: flex; align-items: center; gap: 10px; padding: 14px 0; cursor: pointer; list-style: none; } .kan-cl-fold > summary::-webkit-details-marker { display: none; } .kan-cl-fold > summary::before { content: "\F285"; font-family: "bootstrap-icons"; font-size: 0.8rem; color: var(--ink-2); transition: transform 0.15s; } .kan-cl-fold[open] > summary::before { transform: rotate(90deg); } .kan-cl-fold > summary .kan-cl-month { margin: 0; } .kan-cl-fold > summary .kan-cl-n { margin-left: auto; font-size: 0.8125rem; color: var(--ink-2); } .kan-cl-fold > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .kan-cl-fold .kan-cl-row:last-child { border-bottom: 0; } .kan-tr-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 1.5rem 0; } .kan-tr-tiles .kan-stat i { float: none; display: block; margin-bottom: 8px; font-size: 1.5rem; color: var(--accent); } .kan-tr-table td.text-end, .kan-tr-table th.text-end { font-variant-numeric: tabular-nums; } @media (max-width: 768px) { .kan-about-oc { flex-direction: column; overflow-y: auto; } .kan-about-text { flex: 0 0 auto; height: auto; padding: 2rem 1.5rem; } .kan-about-content { flex: 1 0 320px; } .kan-about-cl { padding: 1.5rem; } } /* ---------- modules: view panel, applicants, progress (tokens only) ---------- */ .kan-oc-wide { --bs-offcanvas-width: min(640px, 100vw); } .kan-oc.kan-oc-full { --bs-offcanvas-width: 100vw; } /* a screen inside a panel (app.js mountViewCrud): its New/Edit form and backdrop stack above the panel */ #crudOc[data-from-view] { --bs-offcanvas-zindex: 1047; } .offcanvas-backdrop ~ .offcanvas-backdrop { z-index: 1046; } .kan-oc-full > .offcanvas-body { padding: 24px clamp(16px, 3vw, 40px); } .kan-oc.kan-oc-split { --bs-offcanvas-width: min(1180px, 100vw); } .kan-oc-split > .offcanvas-body { padding: 24px clamp(16px, 2.5vw, 32px); } .kan-view-link { color: var(--accent); font-weight: 500; text-decoration: none; } .kan-view-link:hover { color: var(--accent-hover); text-decoration: underline; } .kan-stat-sm { padding: 10px 12px; } .kan-stat-sm .num { font-size: 1.375rem; } .kan-stars { color: var(--warning); white-space: nowrap; } .kan-progress { display: inline-block; vertical-align: middle; width: 90px; height: 6px; border-radius: 3px; overflow: hidden; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); } .kan-progress-bar { height: 100%; width: 0; background: var(--accent); } .kan-progress.is-lg { width: 100%; height: 8px; } .kan-note { padding: 10px 0; border-top: 1px solid var(--line); font-size: 0.875rem; } .kan-panel-block { padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); } .kan-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } /* ---------- people: avatars, cards, chips, feed ---------- */ .kan-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 50%; object-fit: cover; font-weight: 600; color: #fff; background: var(--s1); } .kan-avatar[class*="kc-s"] { background: currentColor; } .kan-avatar.kc-s1 { background: var(--s1); color: #fff; } .kan-avatar.kc-s2 { background: var(--s2); color: #fff; } .kan-avatar.kc-s3 { background: var(--s3); color: #fff; } .kan-avatar.kc-s4 { background: var(--s4); color: #0c1a1f; } .kan-avatar.kc-s5 { background: var(--s5); color: #0c1a1f; } .kan-avatar.kc-s6 { background: var(--s6); color: #fff; } .kan-avatar.kc-s7 { background: var(--s7); color: #fff; } .kan-avatar.kc-s8 { background: var(--s8); color: #fff; } .kan-avatar.is-sm { width: 28px; height: 28px; font-size: 0.7rem; } .kan-avatar.is-md { width: 40px; height: 40px; font-size: 0.85rem; } .kan-avatar.is-lg { width: 64px; height: 64px; font-size: 1.2rem; } .kan-avatar.is-xl { width: 120px; height: 120px; font-size: 2rem; } .kan-person-card { display: block; height: 100%; padding: 18px; text-align: center; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); } .kan-person-card:hover { border-color: var(--accent); color: var(--ink); } .kan-person-head { color: var(--ink-2); } .kan-chip { background: var(--accent-wash); color: var(--accent); font-weight: 500; margin: 0 4px 4px 0; } .kan-feed { max-width: 760px; } .kan-post.is-announcement { border-color: var(--warning); } .kan-post-body p:last-child { margin-bottom: 0; } .kan-comments { border-top: 1px solid var(--line); padding-top: 8px; } .kan-comment { padding: 6px 0; } .kan-comment p { margin-bottom: 0; } /* ---------- training: lessons, video, certificate ---------- */ .kan-lesson-list .list-group-item { font-size: 0.875rem; } .kan-lesson-body { line-height: 1.7; max-width: 760px; } .kan-video { border-radius: var(--r-md); background: #000; } .kan-video-soon { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; aspect-ratio: 16 / 9; border-radius: var(--r-md); background: var(--surface-2); border: 1px dashed var(--line-strong); color: var(--ink-3); } .kan-video-soon .bi { font-size: 1.6rem; } .kan-eyebrow { letter-spacing: 0.12em; } body.kan-cert-page { background: var(--bg); padding: 24px; } .kan-cert-tools { max-width: 900px; margin: 0 auto 12px; display: flex; gap: 8px; justify-content: flex-end; } .kan-cert { max-width: 900px; margin: 0 auto; padding: 64px 48px; text-align: center; background: var(--surface); border: 10px double var(--accent); border-radius: var(--r-lg); color: var(--ink); } .kan-cert-logo { font-weight: 700; letter-spacing: 0.01em; font-size: 1.25rem; color: var(--accent); } .kan-cert-org { color: var(--ink-2); margin-top: 4px; } .kan-cert-pre { margin: 28px 0 6px; color: var(--ink-2); font-style: italic; } .kan-cert-name { font-size: 2.6rem; font-weight: 600; margin: 0; } .kan-cert-course { font-size: 1.6rem; font-weight: 600; color: var(--accent); margin: 0; } .kan-cert-date { margin-top: 32px; color: var(--ink-2); } @media print { body.kan-cert-page { background: #fff; padding: 0; } .kan-cert-tools { display: none; } .kan-cert { border-color: #0b7566; } } /* ---------- tutor, settings, security ---------- */ .kan-tutor-step .card-body > p:last-child { margin-bottom: 0; } /* each Tutor step is folded: its title is the toggle, Mark as understood stays beside it */ .kan-tutor-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px var(--bs-card-spacer-x); } .kan-tutor-head h2 { flex: 1; min-width: 0; } .kan-tutor-toggle { display: flex; align-items: center; gap: 10px; width: 100%; padding: 4px 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; } .kan-tutor-toggle:hover { color: var(--accent); } .kan-tutor-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-md); } .kan-tutor-caret { font-size: 0.8rem; color: var(--ink-2); transition: transform 0.15s; } .kan-tutor-toggle[aria-expanded="true"] .kan-tutor-caret { transform: rotate(90deg); } @media (prefers-reduced-motion: reduce) { .kan-tutor-caret { transition: none; } } /* training videos: folded like Tutor steps; open, what it covers + View video (its own window) */ .kan-video-item .kan-tutor-head { padding-top: 8px; padding-bottom: 8px; } .kan-video-item .card-body > p:last-child { margin-bottom: 0; } .kan-video-ico { color: var(--accent); } .kan-video-mod { display: block; font-size: 0.75rem; font-weight: 400; color: var(--ink-3); } .kan-watch { max-width: 1040px; } /* the Tutor's own window (kanLayout::tutor_page): Lessons / Videos tabs, no sidebar */ .kan-tutor-app .kan-main { padding-top: 24px; max-width: 1440px; margin: 0 auto; width: 100%; } .kan-tutor-tabs { display: flex; gap: 4px; } .kan-tutor-tab { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-md); color: var(--nav-ink-2); text-decoration: none; font-size: 0.875rem; } .kan-tutor-tab:hover { color: var(--nav-ink); background: var(--nav-hover); } .kan-tutor-tab.active { color: var(--nav-ink); background: var(--nav-active); } .kan-tutor-tab.active i { color: var(--nav-mark); } @media (max-width: 575.98px) { .kan-tutor-app .kan-top { gap: 6px; padding: 0 10px; } .kan-tutor-tab { padding: 6px 9px; } .kan-tutor-tab span { display: none; } } .kan-shot { margin: 12px 0; } .kan-shot img { max-width: 100%; border: 1px solid var(--line); border-radius: var(--r-md); } .kan-qr { width: 200px; height: 200px; padding: 8px; background: #fff; border-radius: var(--r-md); border: 1px solid var(--line); } .kan-qr svg { width: 100%; height: 100%; } .kan-secret { font-family: var(--mono); letter-spacing: 0.06em; } .kan-attn .is-critical-icon { color: var(--critical); } .kan-attn .is-warning-icon { color: var(--warning); } /* ---------- help tab: ? help desk / book Tutor / camera videos ---------- A white tab hanging from the bottom-right of the sticky header (it lives inside .kan-top, absolutely positioned below it), so it stays put while the page scrolls. */ .kan-top { position: sticky; } .kan-help-bubble { position: absolute; top: 100%; right: 18px; z-index: 1; /* under the name menu (1000) */ display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 10px; background: var(--surface); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--r-lg) var(--r-lg); box-shadow: var(--shadow-pop); } .kan-hb-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 2px solid var(--ink); border-radius: 50%; background: var(--surface); color: var(--ink); text-decoration: none; font-size: 1.05rem; } .kan-hb-btn:hover, .kan-hb-btn:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .kan-hb-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* The tab hangs over the right end of the page title row, not above it: the page starts right under the header, and the title row stops short of the tab (its buttons sit left of it). The tab is 164px wide, 18px in from the edge; .kan-main's own right padding covers the rest. */ .kan-main { padding-top: 20px; } .kan-main > .kan-page-head { padding-right: 180px; min-height: 40px; } @media (max-width: 575.98px) { .kan-where { display: none; } .kan-help-bubble { right: 10px; gap: 8px; padding: 6px 10px 8px; } .kan-hb-btn { width: 34px; height: 34px; } /* phones: only the title stops short of the tab; its buttons get their own row */ .kan-main > .kan-page-head { padding-right: 0; } .kan-main > .kan-page-head > h1 { max-width: calc(100% - 140px); } .kan-main > .kan-page-head > :not(h1) { flex-basis: 100%; justify-content: flex-end; } } /* ---------- help desk threads ---------- */ .kan-help-thread { display: flex; flex-direction: column; gap: 10px; } .kan-help-msg { padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); font-size: 0.875rem; } .kan-help-msg.is-staff { background: var(--accent-wash); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); } .kan-help-msg p:last-child { margin-bottom: 0; } /* ---------- My Preferences: per-theme preview, swatches (colours set by app.js) ---------- */ .kan-pref-prev { display: grid; grid-template-columns: 112px 1fr; height: 132px; margin-bottom: 1.25rem; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg); color: var(--ink); font-size: 0.75rem; } .kan-pref-prev-nav { display: flex; flex-direction: column; gap: 4px; padding: 10px 8px; background: var(--nav-bg); color: var(--nav-ink-2); } .kan-pref-prev-nav b { margin: 0 4px 6px; color: var(--nav-mark); font-weight: 600; } .kan-pref-prev-nav span { padding: 3px 6px; border-radius: var(--r-sm); } .kan-pref-prev-nav .is-on { background: var(--nav-active); color: var(--nav-ink); } .kan-pref-prev-main { padding: 14px; } .kan-pref-prev-card { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); } .kan-pref-prev-card p { margin: 2px 0 8px; color: var(--ink-2); } .kan-pref-prev-h { font-weight: 600; } .kan-pref-prev-link { color: var(--accent); text-decoration: underline; } .kan-pref-prev-btn { display: inline-block; padding: 2px 10px; border-radius: var(--r-sm); background: var(--accent); color: var(--accent-ink); font-weight: 500; } .kan-pref-color + .kan-pref-color { margin-top: 1.1rem; } /* a colour picker: the swatch opens the browser's colour chooser (its input lies invisibly over it), the hex box takes a typed code; app.js keeps them in step and paints the swatch */ .kan-pref-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .kan-pref-swatch { position: relative; display: grid; place-items: center; width: 3rem; height: 2.375rem; flex: none; margin: 0; border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: inset 0 0 0 2px var(--surface); cursor: pointer; } .kan-pref-swatch input[type=color] { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; opacity: 0; cursor: pointer; } .kan-pref-swatch i { font-size: 1rem; pointer-events: none; } .kan-pref-swatch:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; } .kan-pref-hex { width: 7.5rem; flex: none; font-family: var(--mono); } .kan-pref-pick .invalid-feedback { flex-basis: 100%; margin-top: 0; } .kan-pref-warn { margin-top: 6px; color: var(--down-bad-text); } /* ---------- System Logos (kanBrand): header graphic + dashboard background ---------- */ .kan-top .kan-logo, .offcanvas-header .kan-logo { display: inline-flex; align-items: center; gap: 8px; } .kan-logo-img { display: block; height: 32px; width: auto; max-width: 220px; object-fit: contain; } .kan-logo-suffix { font-weight: 600; } .kan-main.has-backdrop { position: relative; isolation: isolate; } .kan-backdrop { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: center top / cover no-repeat; } .kan-brand-bar { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 16px; border-radius: var(--r-md); background: var(--nav-bg); } .kan-brand-bar .kan-where { color: var(--nav-ink-2); font-size: 0.8125rem; } .kan-brand-dash { position: relative; isolation: isolate; height: 170px; overflow: hidden; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg); } .kan-brand-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .kan-brand-tile { padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); } .kan-brand-tile span { display: block; width: 50%; height: 6px; margin-bottom: 10px; border-radius: 3px; background: var(--line-strong); } .kan-brand-tile b { font-size: 1.25rem; font-weight: 600; color: var(--ink); } .form-range::-webkit-slider-thumb { background-color: var(--accent); } .form-range::-moz-range-thumb { background-color: var(--accent); } .form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--bg), 0 0 0 0.25rem rgba(var(--accent-rgb), 0.25); } .form-range:focus::-moz-range-thumb { box-shadow: 0 0 0 1px var(--bg), 0 0 0 0.25rem rgba(var(--accent-rgb), 0.25); } /* ---------- API Keys: a card per service; its panel is setup steps | fields ---------- */ .kan-key-card { display: flex; flex-direction: column; gap: 6px; width: 100%; height: 100%; padding: 18px 20px; text-align: left; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s; } .kan-key-card:hover { border-color: var(--accent); box-shadow: var(--shadow-pop); transform: translateY(-1px); } .kan-key-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .kan-key-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 4px; border-radius: var(--r-md); background: var(--accent-wash); color: var(--accent); font-size: 1.15rem; } .kan-key-title { font-weight: 600; font-size: 1rem; } .kan-key-intro { color: var(--ink-2); font-size: 0.8125rem; line-height: 1.5; flex: 1; } .kan-key-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); } .kan-key-count { color: var(--ink-3); font-size: 0.8125rem; } .kan-key-go { margin-left: auto; color: var(--accent); font-weight: 500; font-size: 0.8125rem; } .kan-key-go i { margin-left: 4px; } .kan-split-help { height: 100%; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); line-height: 1.6; } .kan-steps { padding-left: 1.25rem; margin-bottom: 1rem; } .kan-steps li { margin-bottom: 0.7rem; } .kan-steps li::marker { color: var(--accent); font-weight: 600; } .kan-code { margin: 8px 0 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font-family: var(--mono); font-size: 0.75rem; white-space: pre; overflow-x: auto; } .kan-key-test { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); } /* ---------- upload fields (kan-drop.js turns every input[type=file] into this) ---------- The real input lies invisibly over .kan-drop-zone, so click, keyboard and drop are the browser's own. A chosen file shows as .kan-drop-file INSTEAD of the zone, with Remove; one file, one picture: never a second upload box beside it (owner's rule). */ .kan-drop { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); } .kan-drop > .invalid-feedback { grid-column: 1 / -1; margin-top: -4px; } .kan-drop:has(.is-invalid) > .invalid-feedback { display: block; } .kan-drop-zone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 156px; padding: 20px 16px; text-align: center; color: var(--ink-2); border: 2px dashed var(--ink-3); border-radius: var(--r-lg); background: var(--surface-2); transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; } .kan-drop-zone > input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; } .kan-drop-zone:hover, .kan-drop.is-over .kan-drop-zone { border-color: var(--accent); background: var(--accent-wash); } .kan-drop-zone:focus-within { border-color: var(--accent); box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color); } .kan-drop:has(.is-invalid) .kan-drop-zone { border-color: var(--critical); } .kan-drop-icon { font-size: 1.75rem; line-height: 1; color: var(--accent); margin-bottom: 8px; } .kan-drop-title { font-size: 1rem; font-weight: 600; color: var(--ink); } .kan-drop-sub { font-size: 0.9375rem; } .kan-drop-hint { margin-top: 8px; font-size: 0.8125rem; color: var(--ink-3); } .kan-drop.has-file > .kan-drop-zone { display: none; } .kan-drop-file { position: relative; display: flex; flex-direction: column; min-height: 156px; overflow: hidden; grid-column: 1 / -1; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); } .kan-drop-thumb { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 112px; padding: 10px; background: var(--surface-2); } /* a checkerboard behind images, so a transparent or white logo still shows */ .kan-drop-thumb.is-image { background: conic-gradient(var(--line) 25%, var(--surface) 0 50%, var(--line) 0 75%, var(--surface) 0) 0 0 / 16px 16px; } .kan-drop-thumb img { display: block; max-width: 100%; max-height: 180px; object-fit: contain; } .kan-drop-type { font-size: 2.75rem; line-height: 1; color: var(--accent); } .kan-drop-meta { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-top: 1px solid var(--line); font-size: 0.8125rem; } .kan-drop-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--ink); } .kan-drop-size { flex: none; color: var(--ink-3); } .kan-drop-remove { flex: none; } /* ---------- a saved picture in an upload field (kan-drop.js data-current) ---------- Shown INSTEAD of the drop zone: the picture and Remove; the zone appears once it is removed. */ .kan-drop.has-current > .kan-drop-zone, .kan-drop.has-current > .kan-drop-file { display: none; } .kan-drop-current { grid-column: 1 / -1; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); } .kan-drop-current-frame { display: flex; align-items: center; justify-content: center; min-height: 120px; padding: 16px; background: conic-gradient(var(--line) 25%, var(--surface) 0 50%, var(--line) 0 75%, var(--surface) 0) 0 0 / 16px 16px; } .kan-drop-current.is-dark .kan-drop-current-frame { background: var(--nav-bg); } .kan-drop-current-frame img { display: block; max-width: 100%; max-height: 220px; object-fit: contain; } .kan-drop-current-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-top: 1px solid var(--line); } .kan-drop-current-label { font-size: 0.8125rem; font-weight: 500; color: var(--ink-2); } /* ---------- a page's own tabs (Settings: System Colors | System Logos | Job Board) ---------- */ .kan-subnav { gap: 4px 24px; border-bottom: 1px solid var(--line); --bs-nav-link-color: var(--ink-2); --bs-nav-link-hover-color: var(--ink); --bs-nav-underline-link-active-color: var(--accent); } .kan-subnav .nav-link { padding: 10px 2px; font-weight: 500; margin-bottom: -1px; } .kan-subnav .nav-link.active { font-weight: 600; } .kan-subnav .nav-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); } /* header graphic in light + dark versions (kanLayout::logo_html prints both): the theme's shows */ html[data-bs-theme="dark"] .kan-logo-for-light, html:not([data-bs-theme="dark"]) .kan-logo-for-dark { display: none; } /* System Logos header card: the two uploaders share column 1, so their zones are compact */ .kan-brand-up .kan-drop-zone { min-height: 128px; padding: 14px 10px; } .kan-brand-up .kan-drop-icon { font-size: 1.375rem; margin-bottom: 4px; } .kan-brand-up .kan-drop-title { font-size: 0.9375rem; } .kan-brand-up .kan-drop-sub { font-size: 0.875rem; } .kan-brand-up .kan-drop-current-frame { min-height: 72px; padding: 12px; } .kan-brand-up .kan-drop-current-frame img { max-height: 48px; } /* a saved header graphic shown on its own mode's header colour (kanFiles::current_attrs on => light|dark) */ .kan-drop-current.is-on-light .kan-drop-current-frame { background: var(--nav-bg-light); } .kan-drop-current.is-on-dark .kan-drop-current-frame { background: var(--nav-bg-dark); } /* System Branding > Background: the preview is a page in miniature, its header over the dashboard */ .kan-brand-shot { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); } .kan-brand-shot .kan-brand-bar { border-radius: 0; } .kan-brand-shot .kan-brand-dash { height: 220px; border: 0; border-radius: 0; } /* Jobs Board editor (jobs/public.pm, corp/clubbrand.pm): the careers page (public/web/jobs.css) in miniature, driven by the same --jb-* properties (kanJobsBoard::vars; app.js jbVars as you type) */ .kan-jb-prev { --jb-shade: 0.45; --jb-page-ink: #0c1a1f; --jb-page-ink-2: #45565c; --jb-link: var(--jb-accent); position: sticky; top: 76px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--jb-bg); font-size: 0.75rem; box-shadow: var(--shadow-1, none); } .kan-jb-prev-top { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-bottom: 1px solid var(--jb-line); background: var(--jb-panel); color: var(--jb-ink); } .kan-jb-prev-top > i { margin-left: auto; padding: 3px 10px; border-radius: 6px; background: var(--jb-accent); color: var(--jb-accent-ink); font-style: normal; font-weight: 600; font-size: 0.6875rem; } .kan-jb-prev-tag { padding-left: 8px; border-left: 1px solid var(--jb-line); color: var(--jb-ink-2); } .kan-jb-prev-logo { color: var(--jb-ink); font-weight: 600; } .kan-jb-prev-logoimg { display: block; max-height: 22px; max-width: 120px; object-fit: contain; } /* a corporation's logo (Public Page) */ .kan-jb-prev-hero { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 22px 16px 18px; overflow: hidden; color: #fff; background: radial-gradient(260px 120px at 90% -10%, color-mix(in srgb, var(--jb-accent) 52%, transparent), transparent 62%), linear-gradient(140deg, color-mix(in srgb, var(--jb-accent) 34%, #04121c) 0%, #04121c 78%); background-position: center; background-size: cover; } .kan-jb-prev-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgb(4 18 28 / calc(var(--jb-shade) + 0.18)), rgb(4 18 28 / calc(var(--jb-shade) * 0.4))); } .kan-jb-prev-hero em { padding: 1px 8px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px; background: rgba(255, 255, 255, 0.1); font-style: normal; font-size: 0.625rem; } .kan-jb-prev-hero b { max-width: 20ch; font-size: 1.25rem; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; } .kan-jb-prev-hero span { max-width: 40ch; opacity: 0.88; } .kan-jb-prev-search { display: flex; align-self: stretch; gap: 4px; margin-top: 8px; padding: 3px; border-radius: 8px; background: var(--jb-panel); } .kan-jb-prev-search span { flex: 1; padding: 4px 8px; color: var(--jb-ink-3); opacity: 1; } .kan-jb-prev-search i { padding: 4px 10px; border-radius: 6px; background: var(--jb-accent); color: var(--jb-accent-ink); font-style: normal; font-weight: 600; } .kan-jb-prev-body { padding: 14px; } .kan-jb-prev-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; color: var(--jb-page-ink); font-size: 0.9375rem; font-weight: 600; } .kan-jb-prev-h small { color: var(--jb-page-ink-2); font-size: 0.6875rem; font-weight: 400; } .kan-jb-prev-job { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; padding: 9px 11px; border: 1px solid var(--jb-line); border-radius: var(--r-md); background: var(--jb-panel); } .kan-jb-prev-job > span { display: flex; flex: 1; flex-direction: column; min-width: 0; } .kan-jb-prev-job b { color: var(--jb-ink); font-weight: 600; } .kan-jb-prev-job small { color: var(--jb-ink-3); font-size: 0.6875rem; } .kan-jb-prev-job i { padding: 3px 8px; border: 1px solid var(--jb-line); border-radius: 6px; color: var(--jb-ink); font-style: normal; font-size: 0.6875rem; font-weight: 600; } /* Application form builder (jobs/forms.pm, kan-forms.js): settings + palette left, question cards right */ .kan-fb-bar { position: sticky; top: 64px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: 0 6px 18px -14px rgba(0, 0, 0, 0.35); } .kan-fb-namewrap { flex: 1 1 320px; min-width: 0; } .kan-fb-name { font-size: 1.125rem; font-weight: 600; border-color: transparent; background: transparent; } .kan-fb-name:hover { border-color: var(--line); } .kan-fb-name:focus { background: var(--surface); } .kan-fb-tools { display: flex; align-items: center; gap: 12px; margin-left: auto; } .kan-fb-note { display: flex; gap: 8px; align-items: flex-start; } .kan-fb-palette { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .kan-fb-type { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font-size: 0.8125rem; text-align: left; transition: border-color .12s, background .12s; } .kan-fb-type:hover, .kan-fb-type:focus-visible { border-color: var(--accent); background: var(--accent-wash); } .kan-fb-type .bi { color: var(--accent); font-size: 1rem; } .kan-fb-fixed { margin-bottom: 12px; padding: 12px 16px; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--surface-2); } .kan-fb-fixed-head { display: flex; align-items: center; gap: 6px; font-size: 0.875rem; } .kan-fb-fixed-head .bi { color: var(--ink-3); } .kan-fb-fixed-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; } .kan-fb-fixed-list li { padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: 0.8125rem; } .kan-fb-list { display: flex; flex-direction: column; gap: 8px; } .kan-fb-empty { padding: 32px; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); color: var(--ink-3); text-align: center; } .kan-fb-q { position: relative; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); transition: border-color .12s, box-shadow .12s; } .kan-fb-q:hover { border-color: var(--line-strong); } .kan-fb-q.is-open { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); } .kan-fb-q.is-invalid { border-color: var(--critical); } .kan-fb-q.is-heading { background: var(--surface-2); } .kan-fb-q.is-heading .kan-fb-q-label { font-size: 1rem; } .kan-fb-q.is-dragging { opacity: 0.5; } .kan-fb-q.is-drop-before { box-shadow: 0 -3px 0 var(--accent); } .kan-fb-q.is-drop-after { box-shadow: 0 3px 0 var(--accent); } .kan-fb-q-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; } .kan-fb-grip { display: inline-flex; padding: 4px 2px; color: var(--ink-3); cursor: grab; } .kan-fb-grip:active { cursor: grabbing; } .kan-fb-q-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; border-radius: var(--r-md); background: var(--accent-wash); color: var(--accent); } .kan-fb-q-title { display: flex; flex: 1; flex-direction: column; min-width: 0; padding: 2px 4px; border: 0; background: none; color: var(--ink); text-align: left; } .kan-fb-q-label { overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; } .kan-fb-q-label.is-empty { color: var(--ink-3); font-weight: 400; font-style: italic; } .kan-fb-q-meta { color: var(--ink-3); font-size: 0.75rem; } .kan-fb-q-error { margin: -2px 12px 8px 78px; color: var(--critical); font-size: 0.8125rem; } .kan-fb-q-body { padding: 4px 16px 16px; border-top: 1px solid var(--line); padding-top: 14px; } .kan-fb-opts-list { display: flex; flex-direction: column; gap: 6px; } .kan-fb-opt { display: flex; align-items: center; gap: 8px; } .kan-fb-opt > .bi { color: var(--ink-3); } .kan-fb-pv { max-width: 760px; padding: clamp(18px, 3vw, 32px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); } .kan-fb-pv-badge { display: inline-block; margin-bottom: 12px; padding: 2px 10px; border-radius: 999px; background: var(--accent-wash); color: var(--accent); font-size: 0.75rem; font-weight: 600; } .kan-fb-pv-step { display: flex; align-items: center; gap: 10px; margin: 24px 0 14px; font-size: 1rem; font-weight: 600; } .kan-fb-pv-step > span { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 0.75rem; } .kan-fb-pv-step::after { content: ""; flex: 1; height: 1px; background: var(--line); } .kan-fb-pv-choices { display: flex; flex-wrap: wrap; gap: 6px; } .kan-fb-pv-choice { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--r-md); font-size: 0.875rem; } .kan-fb-pv-file { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 90px; border: 2px dashed var(--line-strong); border-radius: var(--r-lg); color: var(--ink-3); } /* Application Forms > About (jobs/forms.pm _about_html): the four things a starting form is made of */ .kan-about-forms .modal-content { border: 0; box-shadow: var(--shadow-pop); } .kan-about-forms .modal-header { align-items: flex-start; } .kan-about-forms .modal-body { padding: clamp(16px, 3vw, 28px); background: var(--bg); } .kan-about-lead { display: flex; gap: 12px; margin: 0; padding: 14px 16px; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); } .kan-about-lead > .bi { flex: none; color: var(--accent); font-size: 1.25rem; } .kan-about-sec { margin-top: 28px; } .kan-about-sec > h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 2px; font-size: 1.125rem; font-weight: 600; } .kan-about-sec > h3 > span { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 0.875rem; } .kan-about-sec > p { margin: 0 0 12px 38px; color: var(--ink-2); } .kan-about-group, .kan-about-tile { height: 100%; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); } .kan-about-group > h4 { margin: 0 0 8px; color: var(--accent); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.03em; } .kan-about-group ul { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; } .kan-about-group li { display: flex; flex-direction: column; font-size: 0.875rem; } .kan-about-group li strong { color: var(--ink); } .kan-about-group li span { color: var(--ink-2); } .kan-about-tile { display: flex; flex-direction: column; gap: 2px; font-size: 0.875rem; } .kan-about-tile > .bi { margin-bottom: 6px; color: var(--accent); font-size: 1.375rem; } .kan-about-tile > strong { color: var(--ink); font-size: 1rem; } .kan-about-tile > span { color: var(--ink); } .kan-about-tile > small { margin-top: 6px; color: var(--ink-2); font-size: 0.8125rem; } @media (max-width: 575.98px) { .kan-about-sec > p { margin-left: 0; } } /* an applicant's answers in the view panel (jobs/manage.pm _answers_html) */ .kan-answers { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 8px 14px; margin: 0 0 8px; font-size: 0.875rem; } .kan-answers dt { color: var(--ink-2); font-weight: 500; } .kan-answers dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; } @media (max-width: 575.98px) { .kan-answers { grid-template-columns: 1fr; gap: 2px; } .kan-answers dd { margin-bottom: 8px; } } /* an applicant (jobs/manage.pm): the person | their application form, a rule between the halves */ @media (min-width: 992px) { .kan-applicant-form { border-left: 1px solid var(--line); } } @media (max-width: 575.98px) { .kan-fb-palette { grid-template-columns: 1fr; } .kan-fb-q-error { margin-left: 12px; } } /* the confirm modal (app.js kan.confirm): never the browser's box; red for anything that deletes or removes */ .kan-confirm .modal-content { overflow: hidden; border: 0; box-shadow: var(--shadow-pop); } .kan-confirm .modal-title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1rem; font-weight: 600; } .kan-confirm .modal-body { font-size: 0.9375rem; } .kan-confirm [data-confirm-msg] { white-space: pre-line; } /* a row's own question (confirm_field) keeps its paragraphs */ .kan-confirm.is-danger .modal-header { background: var(--critical); color: var(--critical-ink); border-bottom: 0; } .kan-confirm.is-danger .modal-title { color: var(--critical-ink); } .kan-confirm.is-danger .modal-header .btn-close { color: var(--critical-ink); } .kan-confirm.is-danger .modal-content { border-top: 0; } /* the page preview modal (app.js kan.preview, a[data-kan-preview]): a page shown over this one */ .kan-preview .modal-content { overflow: hidden; border: 0; box-shadow: var(--shadow-pop); } .kan-preview .modal-header { gap: 8px; } .kan-preview .modal-title { overflow: hidden; margin: 0; font-size: 1rem; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; } .kan-preview-frame { display: block; width: 100%; height: min(78vh, 900px); border: 0; background: var(--bg); } @media (max-width: 991.98px) { .kan-preview .modal-body { display: flex; } .kan-preview-frame { height: auto; flex: 1; } } .kan-confirm.is-danger .btn-danger { --bs-btn-bg: var(--critical); --bs-btn-border-color: var(--critical); --bs-btn-color: var(--critical-ink); --bs-btn-hover-color: var(--critical-ink); --bs-btn-active-color: var(--critical-ink); } /* a grid's tabs (app.js gridTabs: People by role): the count beside each label */ .kan-grid-tabs .kan-tab-count { display: inline-block; min-width: 1.6em; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--surface-2); color: var(--ink-3); font-size: 0.75rem; font-weight: 600; text-align: center; } .kan-grid-tabs .nav-link.active .kan-tab-count { background: var(--accent-wash); color: var(--accent); } /* the second bar under a grid's tabs (app.js gridFilters): a dropdown per field, its choice shown as a chip */ .kan-grid-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; margin: -6px 0 16px; padding-bottom: 8px; border-bottom: 1px solid var(--line); } .kan-filter-btn { display: inline-flex; align-items: center; gap: 8px; padding: 6px 2px; border: 0; background: none; color: var(--ink-2); font-size: 0.9375rem; font-weight: 500; } .kan-filter-btn:hover { color: var(--ink); } .kan-filter-btn.is-on { color: var(--accent); font-weight: 600; } .kan-filter-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); } .kan-filter-val:empty { display: none; } .kan-filter-val { padding: 1px 9px; border-radius: 999px; background: var(--accent-wash); color: var(--accent); font-size: 0.8125rem; font-weight: 600; } .kan-grid-filters .dropdown-item { display: flex; justify-content: space-between; gap: 18px; } .kan-filter-count { color: var(--ink-3); font-variant-numeric: tabular-nums; } .kan-grid-filters .dropdown-item.active .kan-filter-count { color: inherit; } .kan-filter-clear { margin-left: auto; padding: 6px 2px; border: 0; background: none; color: var(--accent); font-size: 0.875rem; font-weight: 600; } .kan-filter-clear:hover { text-decoration: underline; } /* a full-width form panel in columns (kanCrud form_html full / columns / aside: Edit Person) */ .kan-oc.kan-oc-full { --bs-offcanvas-width: 100vw; } .kan-form-col-h { margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-2); } .kan-form-aside { padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); } .kan-form-aside[aria-busy="true"] { opacity: 0.6; } .kan-form-aside.is-plain { padding: 0; border: 0; border-radius: 0; background: none; } /* aside plain => 1: the grid is the frame */ @media (min-width: 992px) { .kan-form-aside-col { border-left: 1px solid var(--line); } /* aside width as a share of the panel (kanCrud: '60%'..'80%'), the form gets the rest */ .kan-col-lg-20, .kan-col-lg-25, .kan-col-lg-30, .kan-col-lg-35, .kan-col-lg-40, .kan-col-lg-60, .kan-col-lg-65, .kan-col-lg-70, .kan-col-lg-75, .kan-col-lg-80 { flex: 0 0 auto; } .kan-col-lg-20 { width: 20%; } .kan-col-lg-25 { width: 25%; } .kan-col-lg-30 { width: 30%; } .kan-col-lg-35 { width: 35%; } .kan-col-lg-40 { width: 40%; } .kan-col-lg-60 { width: 60%; } .kan-col-lg-65 { width: 65%; } .kan-col-lg-70 { width: 70%; } .kan-col-lg-75 { width: 75%; } .kan-col-lg-80 { width: 80%; } } /* a side panel opened from a page's own form (View on Edit Region's staff) stacks above that form and the second backdrop (1046); a form that came FROM a panel (data-from-view) stays above the panel */ body:has(#crudOc.show:not([data-from-view])) #kanViewOc { --bs-offcanvas-zindex: 1047; } /* ---------- people finder (kanFinder.pm + kan-finder.js): Directory, Social Next People ---------- */ .kan-finder { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; } .kan-finder-q { position: relative; } .kan-finder-q i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-3); } .kan-finder-q input { padding-left: 38px; height: 44px; font-size: 0.9375rem; } .kan-finder-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .kan-finder-row .form-select, .kan-finder-row .form-control { width: auto; min-width: 150px; max-width: 240px; flex: 1 1 150px; } .kan-finder-row .kan-finder-sort { flex: 0 1 180px; } .kan-finder-new { margin: 0 4px; white-space: nowrap; font-size: 0.875rem; } .kan-finder-clear { margin-left: auto; } .kan-finder-status { color: var(--ink-3); font-size: 0.875rem; margin: 4px 0 12px; min-height: 1.25rem; } .kan-finder-hint p { color: var(--ink-3); margin: 16px 0 0; display: flex; align-items: center; gap: 8px; } .kan-finder-me { max-width: 1200px; } .kan-finder-me .row > div { max-width: 360px; } .kan-finder-me .sn-people { grid-template-columns: repeat(auto-fill, minmax(200px, 260px)); } .kan-finder-more { margin-top: 18px; } .kan-finder-more .page-link { min-width: 34px; text-align: center; font-weight: 600; } .kan-finder-more .page-item.active .page-link { color: var(--accent-ink); } @media (max-width: 575.98px) { .kan-finder-row .form-select, .kan-finder-row .form-control { max-width: none; flex-basis: 100%; } .kan-finder-clear { margin-left: 0; } } /* "View as" in the owner banner (demo company only): pick a person, Go */ .kan-viewas { display: inline-flex; align-items: center; gap: 6px; margin-left: 16px; } .kan-viewas label { font-size: 0.8125rem; white-space: nowrap; margin: 0; } .kan-viewas .form-select { width: auto; max-width: 240px; padding-top: 2px; padding-bottom: 2px; } .kan-viewas.is-card { display: flex; flex-wrap: wrap; margin: 0; padding: 10px 14px; border-top: 1px solid var(--line); text-align: left; } .kan-viewas.is-card label { flex-basis: 100%; font-weight: 600; color: var(--ink-2); } .kan-viewas.is-card .form-select { flex: 1 1 0; min-width: 0; width: 100%; max-width: none; } @media (max-width: 767.98px) { .kan-owner-banner .kan-viewas { margin: 6px 0 0; } } /* Delete corporation (owner::corpdelete): a red warning, the numbers, then every detail */ .kan-del h4 { font-size: 1.0625rem; font-weight: 700; margin: 26px 0 10px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--ink); } .kan-del h5 { font-size: 0.9375rem; font-weight: 600; margin: 18px 0 8px; color: var(--ink); } .kan-del-warn { display: flex; gap: 14px; padding: 16px 18px; border-radius: var(--r-lg); background: var(--critical); color: var(--critical-ink); margin-bottom: 14px; } .kan-del-warn > .bi { font-size: 1.75rem; line-height: 1; } .kan-del-warn h3 { font-size: 1.125rem; font-weight: 700; margin: 0 0 4px; color: inherit; } .kan-del-chips { display: flex; flex-wrap: wrap; gap: 8px; } .kan-del-chip { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink-2); font-size: 0.8125rem; } .kan-del-chip strong { color: var(--ink); font-size: 0.9375rem; } /* ---------- a lesson's page builder (training::blocks, Edit Lesson's right-hand column; kan-lesson.js) ---------- */ /* Edit Lesson: the blocks in the aside (70%); the Add list under the lesson's details (kanCrud aside side) */ .kan-form-side { margin-top: 20px; } /* the cards under the lesson's details: one per kind, a + to add it, and dragged into the lesson to add it there */ .kan-lb-menu { display: grid; gap: 8px; } .kan-lb-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 600; color: var(--ink); margin-bottom: 8px; } .kan-lb-add { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--ink); text-align: left; cursor: grab; transition: border-color 0.12s, box-shadow 0.12s; } .kan-lb-add:hover { border-color: var(--accent); } .kan-lb-add:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .kan-lb-add-i { font-size: 1.125rem; line-height: 1; color: var(--accent); } .kan-lb-add-x { flex: 1; min-width: 0; } .kan-lb-add-t { display: block; font-weight: 500; } .kan-lb-add-d { display: block; font-size: 0.75rem; color: var(--ink-3); line-height: 1.3; } .kan-lb-add-plus { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: none; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--accent); transition: background-color 0.12s, color 0.12s; } .kan-lb-add:hover .kan-lb-add-plus { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .kan-lb-ghost { position: fixed; z-index: 2000; pointer-events: none; opacity: 0.92; box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.25); border-color: var(--accent); } /* where a dragged card lands */ .kan-lb-slot { height: 44px; margin: 6px 8px; border: 2px dashed var(--accent); border-radius: var(--r-md); background: var(--accent-wash); } .kan-lb-item + .kan-lb-slot, .kan-lb-slot + .kan-lb-item { border-top: 0; } .kan-lb-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); } .kan-lb-list:empty { display: none; } .kan-lb-item + .kan-lb-item { border-top: 1px solid var(--line); } .kan-lb-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; } .kan-lb-drag { border: 0; background: none; padding: 4px 2px; color: var(--ink-3); cursor: grab; touch-action: none; line-height: 1; border-radius: var(--r-sm); } .kan-lb-drag:hover { color: var(--ink); } .kan-lb-drag:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .kan-lb-icon { font-size: 1.125rem; color: var(--accent); } .kan-lb-text { flex: 1; min-width: 0; } .kan-lb-title { font-weight: 600; color: var(--ink); } .kan-lb-sum { font-size: 0.8125rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kan-lb-item.is-break .kan-lb-row { background: var(--surface-2); border-top: 1px dashed var(--line-strong); border-bottom: 1px dashed var(--line-strong); } .kan-lb-item.is-break .kan-lb-icon { color: var(--ink-3); } .kan-lb-item.is-dragging { opacity: 0.6; background: var(--surface-2); } body.kan-lb-dragging, body.kan-lb-dragging * { cursor: grabbing !important; user-select: none; } /* a block's editor, in its own panel over Edit Lesson (kan-lesson.js): 600px, above the form panel */ .kan-oc.kan-lb-oc { --bs-offcanvas-width: min(600px, 100vw); --bs-offcanvas-zindex: 1048; } .kan-lb-oc .kan-lb-questions { margin: 20px 0 0; } .kan-lb-form-acts { display: flex; gap: 8px; margin-top: 14px; } .kan-lb-empty { text-align: center; padding: 36px 20px; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); color: var(--ink-2); } .kan-lb-empty > .bi { display: block; font-size: 2rem; color: var(--accent); margin-bottom: 8px; } .kan-lb-quiz { display: flex; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); } .kan-lb-quiz > .bi { font-size: 1.5rem; color: var(--accent); line-height: 1; } /* the formatting bar over a text box (kanText's markers) */ .kan-fmt { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; border: 1px solid var(--line-strong); border-bottom: 0; border-radius: var(--r-md) var(--r-md) 0 0; background: var(--surface-2); } .kan-fmt-btn { width: 32px; height: 28px; border: 0; border-radius: var(--r-sm); background: none; color: var(--ink-2); line-height: 1; } .kan-fmt-btn:hover { background: var(--surface); color: var(--accent); } .kan-fmt-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; } .kan-fmt + .kan-fmt-area { border-top-left-radius: 0; border-top-right-radius: 0; } /* ---------- a lesson for the learner (training::blocks::render): pages of blocks ---------- */ .kan-lesson-page > .kan-blk + .kan-blk { margin-top: 1.5rem; } .kan-blk-h { font-size: 1.125rem; font-weight: 600; color: var(--ink); margin: 0 0 0.5rem; } .kan-blk-img { margin: 0; } .kan-blk-img img { display: block; max-width: 100%; height: auto; border-radius: var(--r-md); } .kan-blk-img.is-half { max-width: 50%; } .kan-blk-img.is-small { max-width: 280px; } @media (max-width: 575.98px) { .kan-blk-img.is-half { max-width: 100%; } } .kan-blk-img figcaption { margin-top: 6px; font-size: 0.8125rem; color: var(--ink-3); } .kan-blk-video video { display: block; width: 100%; border-radius: var(--r-md); background: var(--nav-bg); } .kan-blk-video .ratio { border-radius: var(--r-md); overflow: hidden; } .kan-blk-req { margin-top: 8px; font-size: 0.8125rem; font-weight: 500; color: var(--ink-2); } .kan-blk-req > .bi { color: var(--warning); } .kan-blk-req.is-done > .bi { color: var(--good); } .kan-blk-file { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); } .kan-blk-file > .bi { font-size: 1.75rem; color: var(--accent); line-height: 1; } .kan-blk-file-t { flex: 1; min-width: 0; overflow-wrap: anywhere; } .kan-blk-file-t p:last-child { margin-bottom: 0; } .kan-callout { display: flex; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--r-md); background: var(--surface-2); } .kan-callout > .bi { font-size: 1.25rem; line-height: 1.2; color: var(--accent); } .kan-callout.is-important { border-left-color: var(--warning); } .kan-callout.is-important > .bi { color: var(--warning); } .kan-callout.is-safety { border-left-color: var(--critical); } .kan-callout.is-safety > .bi { color: var(--critical); } .kan-callout-h { font-weight: 600; color: var(--ink); margin-bottom: 4px; } .kan-callout p:last-child, .kan-ack-text p:last-child { margin-bottom: 0; } .kan-ack { padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface-2); } .kan-ack-text { margin-bottom: 10px; } .kan-lesson-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); } .kan-lesson-of { font-size: 0.8125rem; color: var(--ink-2); } /* a quiz block: its questions under its settings (builder), and the quiz itself (learner) */ .kan-lb-questions { padding-top: 16px; border-top: 1px dashed var(--line); } .kan-lb-questions-h { font-weight: 600; color: var(--ink); margin-bottom: 4px; } .kan-blk-quiz { padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); } .kan-blk-quiz legend { color: var(--ink); } /* a page alone, for the preview modal's frame (kanLayout::bare_page): no sidebar or top bar */ .kan-bare .kan-main { padding: 20px clamp(12px, 3vw, 28px) 32px; } .kan-preview-page { max-width: 1000px; margin: 0 auto; } /* a lesson that opens once the ones before it are complete (training::learn::_open_ids) */ .kan-lesson-list .kan-lesson-locked { color: var(--ink-3); cursor: not-allowed; background: transparent; }