100 lines
3.4 KiB
CSS
100 lines
3.4 KiB
CSS
@import 'ag-grid-community/styles/ag-grid.css';
|
|
@import 'ag-grid-community/styles/ag-theme-alpine.css';
|
|
|
|
/* App background. Provided as a CSS custom property by src/colors.js
|
|
(installCssVars), with a hard-coded fallback for the very first paint. */
|
|
html,
|
|
body,
|
|
#root {
|
|
min-height: 100%;
|
|
background-color: var(--df-main-background, #82b8b4);
|
|
}
|
|
|
|
html,
|
|
body {
|
|
overscroll-behavior-y: none;
|
|
touch-action: manipulation;
|
|
}
|
|
|
|
|
|
/* ────────────────────────────────────────────────────────────────────────────
|
|
* SYSTEM-WIDE SPELLCHECK OFF
|
|
*
|
|
* dashfront is a German ERP/POS for article numbers, EANs, SKUs and quantities.
|
|
* None of that vocabulary exists in any dictionary, so a spellchecker only ever
|
|
* paints red squiggles and slows typing. Every editable surface must therefore
|
|
* opt out — including inputs the app does not own (ag-grid filter boxes, and
|
|
* any input a browser or extension injects into the page).
|
|
*
|
|
* The `spellcheck` content attribute is the only switch: it is the default for
|
|
* every <input>/<textarea>, and browsers honour it as a presentational hint
|
|
* regardless of the element's own attribute.
|
|
*
|
|
* `TextInput` (src/components/TextInput.jsx) additionally sets spellCheck=false
|
|
* per input, which covers fields React re-renders. This rule is the backstop
|
|
* that also covers DOM we do not create.
|
|
* ──────────────────────────────────────────────────────────────────────────── */
|
|
input,
|
|
textarea,
|
|
[contenteditable] {
|
|
spellcheck: false;
|
|
}
|
|
|
|
html {
|
|
scrollbar-gutter: stable;
|
|
}
|
|
|
|
/* While the assistant chat drawer is open on the right edge of the screen,
|
|
lock page scrolling so the background scrollbar is hidden and does not
|
|
show behind or beside the drawer. */
|
|
html.df-chat-open,
|
|
html.df-chat-open body {
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
html.df-chat-open,
|
|
html.df-chat-open body,
|
|
html.df-chat-open #root {
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
/* While any AppDialog is open, the reserved scrollbar-gutter strip must read
|
|
as fog, not app background. AppDialog toggles `df-dialog-open` on <html>
|
|
(ref-counted for stacked dialogs). The solid fog token is published by
|
|
src/colors.js (installCssVars) with a hard-coded fallback. */
|
|
html.df-dialog-open,
|
|
html.df-dialog-open body,
|
|
html.df-dialog-open #root {
|
|
background-color: var(--df-dialog-fog, #345585);
|
|
}
|
|
|
|
/* SortableJS: Kategorie-Reorder im Edit-Modus.
|
|
Colors come from CSS custom properties injected by src/colors.js
|
|
(installCssVars), so this file stays in sync with the JS token module.
|
|
Plain CSS cannot import the JS module directly. */
|
|
.sortable-ghost {
|
|
opacity: 0.35 !important;
|
|
outline: 2px dashed var(--df-sort-ghost, #15803d);
|
|
outline-offset: 2px;
|
|
background-color: var(--df-sort-ghost-tint, rgba(21, 128, 61, 0.12)) !important;
|
|
}
|
|
|
|
.sortable-chosen {
|
|
box-shadow: var(--df-shadow-sortable, 0 4px 16px rgba(15, 23, 42, 0.12));
|
|
}
|
|
|
|
.drag-handle {
|
|
cursor: grab;
|
|
touch-action: none;
|
|
}
|
|
|
|
.drag-handle:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.sortable-drag {
|
|
opacity: 1 !important;
|
|
box-shadow: var(--df-shadow-drag, 0 8px 20px rgba(15, 23, 42, 0.28));
|
|
cursor: grabbing !important;
|
|
user-select: none !important;
|
|
} |