/* The indx cursors (Nov 2026), from indx-systm's globals/cursors.css: pixel cursors, 21x21, drawn on the 3px grid of the icons. Opt in: nothing here applies unless the page says data-cursors="indx" on , which IndxServer sets for a user who turned them on. The dark ink follows the theme as every dark rule does (data-theme, else the system). */ /* Default: Arrow cursor */ :root[data-cursors="indx"] * { cursor: url('data:image/svg+xml,') 3 0, auto !important; } /* I-beam: Text elements */ :root[data-cursors="indx"] p, :root[data-cursors="indx"] h1, :root[data-cursors="indx"] h2, :root[data-cursors="indx"] h3, :root[data-cursors="indx"] h4, :root[data-cursors="indx"] h5, :root[data-cursors="indx"] h6, :root[data-cursors="indx"] td, :root[data-cursors="indx"] th, :root[data-cursors="indx"] input, :root[data-cursors="indx"] textarea { cursor: url('data:image/svg+xml,') 10 10, text !important; } /* Pointer: Interactive elements */ :root[data-cursors="indx"] a, :root[data-cursors="indx"] button, :root[data-cursors="indx"] input[type="radio"], :root[data-cursors="indx"] input[type="checkbox"], :root[data-cursors="indx"] input[type="submit"], :root[data-cursors="indx"] input[type="button"], :root[data-cursors="indx"] input[type="range"], :root[data-cursors="indx"] select { cursor: url('data:image/svg+xml,') 6 0, pointer !important; } /* Text inside clickable elements should have pointer */ :root[data-cursors="indx"] a *, :root[data-cursors="indx"] button * { cursor: url('data:image/svg+xml,') 6 0, pointer !important; } /* Utility classes */ :root[data-cursors="indx"] .cursor-pointer, :root[data-cursors="indx"] .cursor-pointer * { cursor: url('data:image/svg+xml,') 6 0, pointer !important; } :root[data-cursors="indx"] .cursor-text, :root[data-cursors="indx"] .cursor-text * { cursor: url('data:image/svg+xml,') 10 10, text !important; } :root[data-cursors="indx"] .cursor-resize-col, :root[data-cursors="indx"] .cursor-resize-col * { cursor: url('data:image/svg+xml,') 10 10, col-resize !important; } :root[data-cursors="indx"] .cursor-resize-ew, :root[data-cursors="indx"] .cursor-resize-ew * { cursor: url('data:image/svg+xml,') 10 10, ew-resize !important; } :root[data-cursors="indx"] .cursor-resize-ns, :root[data-cursors="indx"] .cursor-resize-ns * { cursor: url('data:image/svg+xml,') 10 10, ns-resize !important; } :root[data-cursors="indx"] .cursor-not-allowed, :root[data-cursors="indx"] .cursor-not-allowed * { cursor: url('data:image/svg+xml,') 10 10, not-allowed !important; } :root[data-cursors="indx"] .cursor-wait, :root[data-cursors="indx"] .cursor-wait * { cursor: url('data:image/svg+xml,') 10 10, wait !important; } :root[data-cursors="indx"] .cursor-help, :root[data-cursors="indx"] .cursor-help * { cursor: url('data:image/svg+xml,') 10 10, help !important; } :root[data-cursors="indx"] .cursor-move, :root[data-cursors="indx"] .cursor-move * { cursor: url('data:image/svg+xml,') 10 10, move !important; } :root[data-cursors="indx"] .cursor-crosshair, :root[data-cursors="indx"] .cursor-crosshair * { cursor: url('data:image/svg+xml,') 10 10, crosshair !important; } :root[data-cursors="indx"] .cursor-resize-nwse, :root[data-cursors="indx"] .cursor-resize-nwse * { cursor: url('data:image/svg+xml,') 10 10, nwse-resize !important; } :root[data-cursors="indx"] .cursor-resize-nesw, :root[data-cursors="indx"] .cursor-resize-nesw * { cursor: url('data:image/svg+xml,') 10 10, nesw-resize !important; } /* Disabled states */ :root[data-cursors="indx"] input:disabled, :root[data-cursors="indx"] textarea:disabled, :root[data-cursors="indx"] button:disabled, :root[data-cursors="indx"] select:disabled, :root[data-cursors="indx"] .disabled, :root[data-cursors="indx"] .disabled * { cursor: url('data:image/svg+xml,') 10 10, not-allowed !important; } /* Dark: the same shapes in a light ink. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-cursors="indx"] * { cursor: url('data:image/svg+xml,') 3 0, auto !important; } :root:not([data-theme="light"])[data-cursors="indx"] p, :root:not([data-theme="light"])[data-cursors="indx"] h1, :root:not([data-theme="light"])[data-cursors="indx"] h2, :root:not([data-theme="light"])[data-cursors="indx"] h3, :root:not([data-theme="light"])[data-cursors="indx"] h4, :root:not([data-theme="light"])[data-cursors="indx"] h5, :root:not([data-theme="light"])[data-cursors="indx"] h6, :root:not([data-theme="light"])[data-cursors="indx"] td, :root:not([data-theme="light"])[data-cursors="indx"] th, :root:not([data-theme="light"])[data-cursors="indx"] input, :root:not([data-theme="light"])[data-cursors="indx"] textarea { cursor: url('data:image/svg+xml,') 10 10, text !important; } :root:not([data-theme="light"])[data-cursors="indx"] a, :root:not([data-theme="light"])[data-cursors="indx"] button, :root:not([data-theme="light"])[data-cursors="indx"] input[type="radio"], :root:not([data-theme="light"])[data-cursors="indx"] input[type="checkbox"], :root:not([data-theme="light"])[data-cursors="indx"] input[type="submit"], :root:not([data-theme="light"])[data-cursors="indx"] input[type="button"], :root:not([data-theme="light"])[data-cursors="indx"] input[type="range"], :root:not([data-theme="light"])[data-cursors="indx"] select { cursor: url('data:image/svg+xml,') 6 0, pointer !important; } :root:not([data-theme="light"])[data-cursors="indx"] a *, :root:not([data-theme="light"])[data-cursors="indx"] button * { cursor: url('data:image/svg+xml,') 6 0, pointer !important; } :root:not([data-theme="light"])[data-cursors="indx"] .cursor-pointer, :root:not([data-theme="light"])[data-cursors="indx"] .cursor-pointer * { cursor: url('data:image/svg+xml,') 6 0, pointer !important; } :root:not([data-theme="light"])[data-cursors="indx"] .cursor-text, :root:not([data-theme="light"])[data-cursors="indx"] .cursor-text * { cursor: url('data:image/svg+xml,') 10 10, text !important; } :root:not([data-theme="light"])[data-cursors="indx"] .cursor-resize-col, :root:not([data-theme="light"])[data-cursors="indx"] .cursor-resize-col * { cursor: url('data:image/svg+xml,') 10 10, col-resize !important; } :root:not([data-theme="light"])[data-cursors="indx"] .cursor-resize-ew, :root:not([data-theme="light"])[data-cursors="indx"] .cursor-resize-ew * { cursor: url('data:image/svg+xml,') 10 10, ew-resize !important; } :root:not([data-theme="light"])[data-cursors="indx"] .cursor-resize-ns, :root:not([data-theme="light"])[data-cursors="indx"] .cursor-resize-ns * { cursor: url('data:image/svg+xml,') 10 10, ns-resize !important; } :root:not([data-theme="light"])[data-cursors="indx"] .cursor-not-allowed, :root:not([data-theme="light"])[data-cursors="indx"] .cursor-not-allowed * { cursor: url('data:image/svg+xml,') 10 10, not-allowed !important; } :root:not([data-theme="light"])[data-cursors="indx"] .cursor-wait, :root:not([data-theme="light"])[data-cursors="indx"] .cursor-wait * { cursor: url('data:image/svg+xml,') 10 10, wait !important; } :root:not([data-theme="light"])[data-cursors="indx"] .cursor-help, :root:not([data-theme="light"])[data-cursors="indx"] .cursor-help * { cursor: url('data:image/svg+xml,') 10 10, help !important; } :root:not([data-theme="light"])[data-cursors="indx"] .cursor-move, :root:not([data-theme="light"])[data-cursors="indx"] .cursor-move * { cursor: url('data:image/svg+xml,') 10 10, move !important; } :root:not([data-theme="light"])[data-cursors="indx"] .cursor-crosshair, :root:not([data-theme="light"])[data-cursors="indx"] .cursor-crosshair * { cursor: url('data:image/svg+xml,') 10 10, crosshair !important; } :root:not([data-theme="light"])[data-cursors="indx"] .cursor-resize-nwse, :root:not([data-theme="light"])[data-cursors="indx"] .cursor-resize-nwse * { cursor: url('data:image/svg+xml,') 10 10, nwse-resize !important; } :root:not([data-theme="light"])[data-cursors="indx"] .cursor-resize-nesw, :root:not([data-theme="light"])[data-cursors="indx"] .cursor-resize-nesw * { cursor: url('data:image/svg+xml,') 10 10, nesw-resize !important; } :root:not([data-theme="light"])[data-cursors="indx"] input:disabled, :root:not([data-theme="light"])[data-cursors="indx"] textarea:disabled, :root:not([data-theme="light"])[data-cursors="indx"] button:disabled, :root:not([data-theme="light"])[data-cursors="indx"] select:disabled, :root:not([data-theme="light"])[data-cursors="indx"] .disabled, :root:not([data-theme="light"])[data-cursors="indx"] .disabled * { cursor: url('data:image/svg+xml,') 10 10, not-allowed !important; } } :root[data-theme="dark"][data-cursors="indx"] * { cursor: url('data:image/svg+xml,') 3 0, auto !important; } :root[data-theme="dark"][data-cursors="indx"] p, :root[data-theme="dark"][data-cursors="indx"] h1, :root[data-theme="dark"][data-cursors="indx"] h2, :root[data-theme="dark"][data-cursors="indx"] h3, :root[data-theme="dark"][data-cursors="indx"] h4, :root[data-theme="dark"][data-cursors="indx"] h5, :root[data-theme="dark"][data-cursors="indx"] h6, :root[data-theme="dark"][data-cursors="indx"] td, :root[data-theme="dark"][data-cursors="indx"] th, :root[data-theme="dark"][data-cursors="indx"] input, :root[data-theme="dark"][data-cursors="indx"] textarea { cursor: url('data:image/svg+xml,') 10 10, text !important; } :root[data-theme="dark"][data-cursors="indx"] a, :root[data-theme="dark"][data-cursors="indx"] button, :root[data-theme="dark"][data-cursors="indx"] input[type="radio"], :root[data-theme="dark"][data-cursors="indx"] input[type="checkbox"], :root[data-theme="dark"][data-cursors="indx"] input[type="submit"], :root[data-theme="dark"][data-cursors="indx"] input[type="button"], :root[data-theme="dark"][data-cursors="indx"] input[type="range"], :root[data-theme="dark"][data-cursors="indx"] select { cursor: url('data:image/svg+xml,') 6 0, pointer !important; } :root[data-theme="dark"][data-cursors="indx"] a *, :root[data-theme="dark"][data-cursors="indx"] button * { cursor: url('data:image/svg+xml,') 6 0, pointer !important; } :root[data-theme="dark"][data-cursors="indx"] .cursor-pointer, :root[data-theme="dark"][data-cursors="indx"] .cursor-pointer * { cursor: url('data:image/svg+xml,') 6 0, pointer !important; } :root[data-theme="dark"][data-cursors="indx"] .cursor-text, :root[data-theme="dark"][data-cursors="indx"] .cursor-text * { cursor: url('data:image/svg+xml,') 10 10, text !important; } :root[data-theme="dark"][data-cursors="indx"] .cursor-resize-col, :root[data-theme="dark"][data-cursors="indx"] .cursor-resize-col * { cursor: url('data:image/svg+xml,') 10 10, col-resize !important; } :root[data-theme="dark"][data-cursors="indx"] .cursor-resize-ew, :root[data-theme="dark"][data-cursors="indx"] .cursor-resize-ew * { cursor: url('data:image/svg+xml,') 10 10, ew-resize !important; } :root[data-theme="dark"][data-cursors="indx"] .cursor-resize-ns, :root[data-theme="dark"][data-cursors="indx"] .cursor-resize-ns * { cursor: url('data:image/svg+xml,') 10 10, ns-resize !important; } :root[data-theme="dark"][data-cursors="indx"] .cursor-not-allowed, :root[data-theme="dark"][data-cursors="indx"] .cursor-not-allowed * { cursor: url('data:image/svg+xml,') 10 10, not-allowed !important; } :root[data-theme="dark"][data-cursors="indx"] .cursor-wait, :root[data-theme="dark"][data-cursors="indx"] .cursor-wait * { cursor: url('data:image/svg+xml,') 10 10, wait !important; } :root[data-theme="dark"][data-cursors="indx"] .cursor-help, :root[data-theme="dark"][data-cursors="indx"] .cursor-help * { cursor: url('data:image/svg+xml,') 10 10, help !important; } :root[data-theme="dark"][data-cursors="indx"] .cursor-move, :root[data-theme="dark"][data-cursors="indx"] .cursor-move * { cursor: url('data:image/svg+xml,') 10 10, move !important; } :root[data-theme="dark"][data-cursors="indx"] .cursor-crosshair, :root[data-theme="dark"][data-cursors="indx"] .cursor-crosshair * { cursor: url('data:image/svg+xml,') 10 10, crosshair !important; } :root[data-theme="dark"][data-cursors="indx"] .cursor-resize-nwse, :root[data-theme="dark"][data-cursors="indx"] .cursor-resize-nwse * { cursor: url('data:image/svg+xml,') 10 10, nwse-resize !important; } :root[data-theme="dark"][data-cursors="indx"] .cursor-resize-nesw, :root[data-theme="dark"][data-cursors="indx"] .cursor-resize-nesw * { cursor: url('data:image/svg+xml,') 10 10, nesw-resize !important; } :root[data-theme="dark"][data-cursors="indx"] input:disabled, :root[data-theme="dark"][data-cursors="indx"] textarea:disabled, :root[data-theme="dark"][data-cursors="indx"] button:disabled, :root[data-theme="dark"][data-cursors="indx"] select:disabled, :root[data-theme="dark"][data-cursors="indx"] .disabled, :root[data-theme="dark"][data-cursors="indx"] .disabled * { cursor: url('data:image/svg+xml,') 10 10, not-allowed !important; } /* A switch, a checkbox or a radio inside its label (systm ToggleSwitch, Checkbox, RadioButton): the whole label is the target, so it takes the pointer, which the catch-all above would deny it. So does a table row that opens in place (Records, Admin > Teams), whose cells would otherwise take the I-beam. */ :root[data-cursors="indx"] label:has(> input[type="checkbox"]), :root[data-cursors="indx"] label:has(> input[type="checkbox"]) *, :root[data-cursors="indx"] label:has(> input[type="radio"]), :root[data-cursors="indx"] label:has(> input[type="radio"]) *, :root[data-cursors="indx"] tr[aria-expanded], :root[data-cursors="indx"] tr[aria-expanded] * { cursor: url('data:image/svg+xml,') 6 0, pointer !important; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-cursors="indx"] label:has(> input[type="checkbox"]), :root:not([data-theme="light"])[data-cursors="indx"] label:has(> input[type="checkbox"]) *, :root:not([data-theme="light"])[data-cursors="indx"] label:has(> input[type="radio"]), :root:not([data-theme="light"])[data-cursors="indx"] label:has(> input[type="radio"]) *, :root:not([data-theme="light"])[data-cursors="indx"] tr[aria-expanded], :root:not([data-theme="light"])[data-cursors="indx"] tr[aria-expanded] * { cursor: url('data:image/svg+xml,') 6 0, pointer !important; } } :root[data-theme="dark"][data-cursors="indx"] label:has(> input[type="checkbox"]), :root[data-theme="dark"][data-cursors="indx"] label:has(> input[type="checkbox"]) *, :root[data-theme="dark"][data-cursors="indx"] label:has(> input[type="radio"]), :root[data-theme="dark"][data-cursors="indx"] label:has(> input[type="radio"]) *, :root[data-theme="dark"][data-cursors="indx"] tr[aria-expanded], :root[data-theme="dark"][data-cursors="indx"] tr[aria-expanded] * { cursor: url('data:image/svg+xml,') 6 0, pointer !important; } /* A Table's column handles, and the whole table while a column is dragged: the column resize. The Table's own rule names it too, but the catch-all and the I-beam on th above are more specific. */ :root[data-cursors="indx"] .indx-table-column-handle, :root[data-cursors="indx"] .indx-table-resizable[data-resizing], :root[data-cursors="indx"] .indx-table-resizable[data-resizing] * { cursor: url('data:image/svg+xml,') 10 10, col-resize !important; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-cursors="indx"] .indx-table-column-handle, :root:not([data-theme="light"])[data-cursors="indx"] .indx-table-resizable[data-resizing], :root:not([data-theme="light"])[data-cursors="indx"] .indx-table-resizable[data-resizing] * { cursor: url('data:image/svg+xml,') 10 10, col-resize !important; } } :root[data-theme="dark"][data-cursors="indx"] .indx-table-column-handle, :root[data-theme="dark"][data-cursors="indx"] .indx-table-resizable[data-resizing], :root[data-theme="dark"][data-cursors="indx"] .indx-table-resizable[data-resizing] * { cursor: url('data:image/svg+xml,') 10 10, col-resize !important; }