`), which as a block pushed the ⓘ onto its own
line under the text. Making the helper a flex container puts the wrapper back
beside the text. */
.cn-field-helper[data-v-3797f4ea] {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.85em;
color: var(--color-text-maxcontrast);
}
.cn-field-helper--error[data-v-3797f4ea] {
color: var(--color-error);
}
/* The button sits inside NcPopover's wrapper, so it is that wrapper — not the
button — that must hold its width against the text beside it. */
.cn-field-helper[data-v-3797f4ea] > .v-popper {
flex: 0 0 auto;
display: inline-flex;
}
/* Server's core/css/inputs.css gives every bare button
`min-height: var(--default-clickable-area)` with `width: auto`, so the target
came out 34px tall but only as wide as the 16px glyph. Size both axes to the
clickable area and centre the icon in it. */
.cn-field-helper__trigger[data-v-3797f4ea] {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: var(--default-clickable-area);
block-size: var(--default-clickable-area);
padding: 0;
border: none;
background: transparent;
color: var(--color-text-maxcontrast);
cursor: pointer;
}
/* vue-material-design-icons ships a stylesheet nothing here imports, so the
icon span is an unstyled inline box and its svg sits on the text baseline
with descender slack under it — enough to read as off-centre. Make it a flex
box so the glyph is the whole item and centres exactly. */
.cn-field-helper__trigger[data-v-3797f4ea] .material-design-icon {
display: flex;
line-height: 1;
}
.cn-field-helper__trigger[data-v-3797f4ea]:hover,
.cn-field-helper__trigger[data-v-3797f4ea]:focus-visible {
color: var(--color-main-text);
}
.cn-field-helper__full[data-v-3797f4ea] {
max-width: 380px;
max-height: 320px;
overflow-y: auto;
padding: 12px;
font-size: 0.9em;
line-height: 1.4;
white-space: pre-wrap;
}
.cn-form-dialog__form[data-v-c3eeb0a2] {
display: flex;
flex-direction: column;
gap: 4px;
}
.cn-form-dialog__field[data-v-c3eeb0a2] {
margin-bottom: 8px;
}
.cn-form-dialog__textarea-wrapper[data-v-c3eeb0a2],
.cn-form-dialog__select-wrapper[data-v-c3eeb0a2],
.cn-form-dialog__json-wrapper[data-v-c3eeb0a2] {
display: flex;
flex-direction: column;
gap: 4px;
}
.cn-form-dialog__label[data-v-c3eeb0a2] {
font-weight: 600;
font-size: 0.9em;
color: var(--color-main-text);
}
/* Cross-app semantic reference (ADR-048) whose provider isn't installed —
rendered disabled; the wrapper carries the mouse-over tooltip. */
.cn-form-dialog__semantic-unresolved[data-v-c3eeb0a2] {
cursor: not-allowed;
}
.cn-form-dialog__textarea[data-v-c3eeb0a2] {
width: 100%;
min-height: 80px;
padding: 8px;
border: 2px solid var(--color-border-maxcontrast);
border-radius: var(--border-radius-large);
background-color: var(--color-main-background);
color: var(--color-main-text);
font-family: inherit;
font-size: inherit;
resize: vertical;
}
.cn-form-dialog__textarea[data-v-c3eeb0a2]:focus {
border-color: var(--color-primary-element);
outline: none;
}
.cn-form-dialog__textarea[data-v-c3eeb0a2]:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.cn-form-dialog__helper[data-v-c3eeb0a2] {
font-size: 0.85em;
color: var(--color-text-maxcontrast);
}
.cn-form-dialog__helper--error[data-v-c3eeb0a2] {
color: var(--color-error);
}
.cn-object-data-widget__image[data-v-3b44dfe2] {
max-width: 100%;
max-height: 160px;
border-radius: 8px;
object-fit: cover;
}
/* Shimmering placeholder while a relation's display name resolves. */
.cn-object-data-widget__skeleton[data-v-3b44dfe2] {
display: inline-block;
width: 90px;
height: 1em;
border-radius: 4px;
background: linear-gradient(90deg, var(--color-background-dark) 25%, var(--color-background-hover) 50%, var(--color-background-dark) 75%);
background-size: 200% 100%;
animation: cn-odw-shimmer-3b44dfe2 1.2s ease-in-out infinite;
}
@keyframes cn-odw-shimmer-3b44dfe2 {
from { background-position: 200% 0;
}
to { background-position: -200% 0;
}
}
@media (prefers-reduced-motion: reduce) {
.cn-object-data-widget__skeleton[data-v-3b44dfe2] { animation: none;
}
}
.cn-object-data-widget__grid-wrap[data-v-3b44dfe2] {
position: relative;
}
.cn-object-data-widget__grid[data-v-3b44dfe2] {
display: grid;
gap: calc(2 * var(--default-grid-baseline, 4px)) calc(4 * var(--default-grid-baseline, 4px));
}
/* Collapsed + overflowing: the grid is clipped at a whole-row boundary
(max-height set inline in collapsedGridStyle). No inner scrollbar. */
.cn-object-data-widget__grid-wrap--clipped .cn-object-data-widget__grid[data-v-3b44dfe2] {
overflow: hidden;
}
/* Bottom fade over the clipped boundary — signals more content. */
.cn-object-data-widget__fade[data-v-3b44dfe2] {
position: absolute;
left: 0;
right: 0;
bottom: 28px;
height: 28px;
pointer-events: none;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--color-main-background));
}
.cn-object-data-widget__toggle[data-v-3b44dfe2] {
display: block;
width: 100%;
margin-top: 4px;
padding: 4px;
background: none;
border: none;
color: var(--color-primary-element);
cursor: pointer;
font: inherit;
font-weight: 600;
text-align: center;
}
.cn-object-data-widget__toggle[data-v-3b44dfe2]:hover,
.cn-object-data-widget__toggle[data-v-3b44dfe2]:focus-visible {
text-decoration: underline;
}
/* Expanded in place: the widget card lifts above its siblings and its content
area stops clipping, so every field is legible even when the grid cell
positions cards absolutely (ADR-062: expand as an anchored panel rather than
an inner scrollbar). */
.cn-object-data-widget--expanded[data-v-3b44dfe2] {
z-index: 20;
}
.cn-object-data-widget--expanded[data-v-3b44dfe2] .cn-widget-wrapper__content {
overflow: visible;
}
.cn-object-data-widget__grid-wrap--expanded[data-v-3b44dfe2] {
background: var(--color-main-background);
}
.cn-object-data-widget__cell[data-v-3b44dfe2] {
display: flex;
flex-direction: column;
gap: 2px;
padding: calc(2 * var(--default-grid-baseline, 4px)) 0;
border-bottom: 1px solid var(--color-border-dark);
min-width: 0;
}
.cn-object-data-widget__label[data-v-3b44dfe2] {
font-size: 0.85em;
color: var(--color-text-maxcontrast);
font-weight: 500;
}
.cn-object-data-widget__value[data-v-3b44dfe2] {
font-size: 1em;
color: var(--color-main-text);
word-break: break-word;
position: relative;
padding-right: 20px;
}
.cn-object-data-widget__value--editable[data-v-3b44dfe2] {
cursor: pointer;
border-radius: var(--border-radius);
padding: 4px 24px 4px 4px;
margin: -4px;
}
.cn-object-data-widget__value--editable[data-v-3b44dfe2]:hover {
background: var(--color-background-dark);
}
.cn-object-data-widget__value--editable[data-v-3b44dfe2]:focus-visible {
outline: 2px solid var(--color-primary-element);
outline-offset: 2px;
}
.cn-object-data-widget__value--empty[data-v-3b44dfe2] {
color: var(--color-text-maxcontrast);
font-style: italic;
}
.cn-object-data-widget__edit-icon[data-v-3b44dfe2] {
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
color: var(--color-text-maxcontrast);
opacity: 0;
transition: opacity 0.15s ease;
}
.cn-object-data-widget__value--editable:hover .cn-object-data-widget__edit-icon[data-v-3b44dfe2],
.cn-object-data-widget__value--editable:focus-visible .cn-object-data-widget__edit-icon[data-v-3b44dfe2] {
opacity: 1;
}
.cn-object-data-widget__editor[data-v-3b44dfe2] {
display: flex;
flex-direction: column;
gap: 4px;
}
.cn-object-data-widget__editor-actions[data-v-3b44dfe2] {
display: flex;
gap: 2px;
justify-content: flex-end;
}
.cn-object-data-widget__textarea[data-v-3b44dfe2] {
width: 100%;
min-height: 80px;
padding: 8px;
border: 2px solid var(--color-border-dark);
border-radius: var(--border-radius);
background: var(--color-main-background);
color: var(--color-main-text);
font-family: inherit;
font-size: inherit;
resize: vertical;
}
.cn-object-data-widget__textarea[data-v-3b44dfe2]:focus {
border-color: var(--color-primary-element);
outline: none;
}
.cn-object-data-widget__empty[data-v-3b44dfe2] {
color: var(--color-text-maxcontrast);
font-style: italic;
padding: calc(2 * var(--default-grid-baseline, 4px));
}
/* Compact inline table for array-of-objects values. Dense + unstyled-simple;
fits the card and participates in the whole-row overflow handling. */
.cn-object-data-widget__mini-table-wrap[data-v-3b44dfe2] {
max-width: 100%;
}
.cn-object-data-widget__mini-table[data-v-3b44dfe2] {
width: 100%;
border-collapse: collapse;
font-size: 0.9em;
}
.cn-object-data-widget__mini-table th[data-v-3b44dfe2],
.cn-object-data-widget__mini-table td[data-v-3b44dfe2] {
text-align: start;
padding: 2px 8px 2px 0;
border-bottom: 1px solid var(--color-border);
vertical-align: top;
word-break: break-word;
}
.cn-object-data-widget__mini-table th[data-v-3b44dfe2] {
color: var(--color-text-maxcontrast);
font-weight: 500;
}
.cn-object-data-widget__more[data-v-3b44dfe2] {
margin-top: 2px;
font-size: 0.85em;
color: var(--color-text-maxcontrast);
}
/* Comma-less chip row for array-of-scalars values. */
.cn-object-data-widget__chips[data-v-3b44dfe2] {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.cn-object-data-widget__chip[data-v-3b44dfe2] {
padding: 1px 8px;
border-radius: 12px;
background: var(--color-background-dark);
font-size: 0.9em;
}
/* Key: value definition list for a single plain-object value. */
.cn-object-data-widget__deflist[data-v-3b44dfe2] {
display: grid;
grid-template-columns: auto 1fr;
gap: 2px 8px;
margin: 0;
}
.cn-object-data-widget__deflist dt[data-v-3b44dfe2] {
color: var(--color-text-maxcontrast);
font-size: 0.9em;
}
.cn-object-data-widget__deflist dd[data-v-3b44dfe2] {
margin: 0;
word-break: break-word;
}
/* Responsive: collapse to single column on narrow widths */
@media (max-width: 600px) {
.cn-object-data-widget__grid[data-v-3b44dfe2] {
grid-template-columns: 1fr !important;
}
.cn-object-data-widget__cell[data-v-3b44dfe2] {
grid-column: span 1 !important;
grid-row: span 1 !important;
}
}
.cn-data-form[data-v-10b5a40f] {
display: flex;
flex-direction: column;
gap: 12px;
}
.cn-data-form__section[data-v-10b5a40f] {
margin: 8px 0 0;
font-size: 0.8em;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--color-text-maxcontrast);
}
.cn-data-form__hint[data-v-10b5a40f] {
color: var(--color-text-maxcontrast);
font-size: 0.9em;
}
.cn-data-form__row2[data-v-10b5a40f] {
display: flex;
gap: 12px;
align-items: flex-end;
}
.cn-data-form__row2[data-v-10b5a40f] > * {
flex: 1;
min-width: 0;
}
.cn-data-form__layout[data-v-10b5a40f] {
display: flex;
align-items: flex-end;
gap: 12px;
flex-wrap: wrap;
}
.cn-data-form__layout-label[data-v-10b5a40f] {
align-self: center;
font-weight: 600;
}
.cn-data-form__presets[data-v-10b5a40f] {
display: inline-flex;
border: 1px solid var(--color-border);
border-radius: var(--border-radius-large, 8px);
overflow: hidden;
}
.cn-data-form__preset[data-v-10b5a40f] {
border: none;
background: var(--color-main-background);
color: var(--color-main-text);
padding: 6px 12px;
cursor: pointer;
border-inline-start: 1px solid var(--color-border);
}
.cn-data-form__preset[data-v-10b5a40f]:first-child {
border-inline-start: none;
}
.cn-data-form__preset--active[data-v-10b5a40f] {
background: var(--color-primary-element);
color: var(--color-primary-element-text);
font-weight: 600;
}
.cn-data-form__columns[data-v-10b5a40f] {
width: 90px;
flex: 0 0 auto;
}
.cn-data-form__prop[data-v-10b5a40f] {
border: 1px solid var(--color-border);
border-radius: var(--border-radius-large, 8px);
padding: 8px 10px;
}
.cn-data-form__prop--hidden[data-v-10b5a40f] {
opacity: 0.6;
}
.cn-data-form__prop--dragging[data-v-10b5a40f] {
opacity: 0.4;
border-style: dashed;
}
.cn-data-form__prop-head[data-v-10b5a40f] {
display: flex;
align-items: center;
gap: 6px;
}
.cn-data-form__grip[data-v-10b5a40f] {
cursor: grab;
color: var(--color-text-maxcontrast);
letter-spacing: -2px;
user-select: none;
}
.cn-data-form__prop-name[data-v-10b5a40f] {
font-weight: 600;
}
.cn-data-form__prop-body[data-v-10b5a40f] {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1.5fr;
gap: 10px;
align-items: center;
margin-top: 8px;
}
/* required styles */
.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
position: absolute;
left: 0;
top: 0;
}
.leaflet-container {
overflow: hidden;
}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-user-drag: none;
}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
image-rendering: -webkit-optimize-contrast;
}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
width: 1600px;
height: 1600px;
-webkit-transform-origin: 0 0;
}
.leaflet-marker-icon,
.leaflet-marker-shadow {
display: block;
}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg {
max-width: none !important;
max-height: none !important;
}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
max-width: none !important;
max-height: none !important;
width: auto;
padding: 0;
}
.leaflet-container img.leaflet-tile {
/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
mix-blend-mode: plus-lighter;
}
.leaflet-container.leaflet-touch-zoom {
-ms-touch-action: pan-x pan-y;
touch-action: pan-x pan-y;
}
.leaflet-container.leaflet-touch-drag {
-ms-touch-action: pinch-zoom;
/* Fallback for FF which doesn't support pinch-zoom */
touch-action: none;
touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
-ms-touch-action: none;
touch-action: none;
}
.leaflet-container {
-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
filter: inherit;
visibility: hidden;
}
.leaflet-tile-loaded {
visibility: inherit;
}
.leaflet-zoom-box {
width: 0;
height: 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
z-index: 800;
}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
-moz-user-select: none;
}
.leaflet-pane { z-index: 400; }
.leaflet-tile-pane { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane { z-index: 500; }
.leaflet-marker-pane { z-index: 600; }
.leaflet-tooltip-pane { z-index: 650; }
.leaflet-popup-pane { z-index: 700; }
.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg { z-index: 200; }
.leaflet-vml-shape {
width: 1px;
height: 1px;
}
.lvml {
behavior: url(#default#VML);
display: inline-block;
position: absolute;
}
/* control positioning */
.leaflet-control {
position: relative;
z-index: 800;
pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
pointer-events: auto;
}
.leaflet-top,
.leaflet-bottom {
position: absolute;
z-index: 1000;
pointer-events: none;
}
.leaflet-top {
top: 0;
}
.leaflet-right {
right: 0;
}
.leaflet-bottom {
bottom: 0;
}
.leaflet-left {
left: 0;
}
.leaflet-control {
float: left;
clear: both;
}
.leaflet-right .leaflet-control {
float: right;
}
.leaflet-top .leaflet-control {
margin-top: 10px;
}
.leaflet-bottom .leaflet-control {
margin-bottom: 10px;
}
.leaflet-left .leaflet-control {
margin-left: 10px;
}
.leaflet-right .leaflet-control {
margin-right: 10px;
}
/* zoom and fade animations */
.leaflet-fade-anim .leaflet-popup {
opacity: 0;
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
opacity: 1;
}
.leaflet-zoom-animated {
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
}
svg.leaflet-zoom-animated {
will-change: transform;
}
.leaflet-zoom-anim .leaflet-zoom-animated {
-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
-moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
transition: transform 0.25s cubic-bezier(0,0,0.25,1);
}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
-webkit-transition: none;
-moz-transition: none;
transition: none;
}
.leaflet-zoom-anim .leaflet-zoom-hide {
visibility: hidden;
}
/* cursors */
.leaflet-interactive {
cursor: pointer;
}
.leaflet-grab {
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: grab;
}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
cursor: crosshair;
}
.leaflet-popup-pane,
.leaflet-control {
cursor: auto;
}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
cursor: move;
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
cursor: grabbing;
}
/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
pointer-events: none;
}
.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
pointer-events: auto;
}
/* visual tweaks */
.leaflet-container {
background: #ddd;
outline-offset: 1px;
}
.leaflet-container a {
color: #0078A8;
}
.leaflet-zoom-box {
border: 2px dotted #38f;
background: rgba(255,255,255,0.5);
}
/* general typography */
.leaflet-container {
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
font-size: 12px;
font-size: 0.75rem;
line-height: 1.5;
}
/* general toolbar styles */
.leaflet-bar {
box-shadow: 0 1px 5px rgba(0,0,0,0.65);
border-radius: 4px;
}
.leaflet-bar a {
background-color: #fff;
border-bottom: 1px solid #ccc;
width: 26px;
height: 26px;
line-height: 26px;
display: block;
text-align: center;
text-decoration: none;
color: black;
}
.leaflet-bar a,
.leaflet-control-layers-toggle {
background-position: 50% 50%;
background-repeat: no-repeat;
display: block;
}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
background-color: #f4f4f4;
}
.leaflet-bar a:first-child {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.leaflet-bar a:last-child {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom: none;
}
.leaflet-bar a.leaflet-disabled {
cursor: default;
background-color: #f4f4f4;
color: #bbb;
}
.leaflet-touch .leaflet-bar a {
width: 30px;
height: 30px;
line-height: 30px;
}
.leaflet-touch .leaflet-bar a:first-child {
border-top-left-radius: 2px;
border-top-right-radius: 2px;
}
.leaflet-touch .leaflet-bar a:last-child {
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
}
/* zoom control */
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
font: bold 18px 'Lucida Console', Monaco, monospace;
text-indent: 1px;
}
.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out {
font-size: 22px;
}
/* layers control */
.leaflet-control-layers {
box-shadow: 0 1px 5px rgba(0,0,0,0.4);
background: #fff;
border-radius: 5px;
}
.leaflet-control-layers-toggle {
background-image: url(images/layers.png);
width: 36px;
height: 36px;
}
.leaflet-retina .leaflet-control-layers-toggle {
background-image: url(images/layers-2x.png);
background-size: 26px 26px;
}
.leaflet-touch .leaflet-control-layers-toggle {
width: 44px;
height: 44px;
}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
display: none;
}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
display: block;
position: relative;
}
.leaflet-control-layers-expanded {
padding: 6px 10px 6px 6px;
color: #333;
background: #fff;
}
.leaflet-control-layers-scrollbar {
overflow-y: scroll;
overflow-x: hidden;
padding-right: 5px;
}
.leaflet-control-layers-selector {
margin-top: 2px;
position: relative;
top: 1px;
}
.leaflet-control-layers label {
display: block;
font-size: 13px;
font-size: 1.08333em;
}
.leaflet-control-layers-separator {
height: 0;
border-top: 1px solid #ddd;
margin: 5px -10px 5px -6px;
}
/* Default icon URLs */
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
background-image: url(images/marker-icon.png);
}
/* attribution and scale controls */
.leaflet-container .leaflet-control-attribution {
background: #fff;
background: rgba(255, 255, 255, 0.8);
margin: 0;
}
.leaflet-control-attribution,
.leaflet-control-scale-line {
padding: 0 5px;
color: #333;
line-height: 1.4;
}
.leaflet-control-attribution a {
text-decoration: none;
}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
text-decoration: underline;
}
.leaflet-attribution-flag {
display: inline !important;
vertical-align: baseline !important;
width: 1em;
height: 0.6669em;
}
.leaflet-left .leaflet-control-scale {
margin-left: 5px;
}
.leaflet-bottom .leaflet-control-scale {
margin-bottom: 5px;
}
.leaflet-control-scale-line {
border: 2px solid #777;
border-top: none;
line-height: 1.1;
padding: 2px 5px 1px;
white-space: nowrap;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.8);
text-shadow: 1px 1px #fff;
}
.leaflet-control-scale-line:not(:first-child) {
border-top: 2px solid #777;
border-bottom: none;
margin-top: -2px;
}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
border-bottom: 2px solid #777;
}
.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
box-shadow: none;
}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
border: 2px solid rgba(0,0,0,0.2);
background-clip: padding-box;
}
/* popup */
.leaflet-popup {
position: absolute;
text-align: center;
margin-bottom: 20px;
}
.leaflet-popup-content-wrapper {
padding: 1px;
text-align: left;
border-radius: 12px;
}
.leaflet-popup-content {
margin: 13px 24px 13px 20px;
line-height: 1.3;
font-size: 13px;
font-size: 1.08333em;
min-height: 1px;
}
.leaflet-popup-content p {
margin: 17px 0;
margin: 1.3em 0;
}
.leaflet-popup-tip-container {
width: 40px;
height: 20px;
position: absolute;
left: 50%;
margin-top: -1px;
margin-left: -20px;
overflow: hidden;
pointer-events: none;
}
.leaflet-popup-tip {
width: 17px;
height: 17px;
padding: 1px;
margin: -10px auto 0;
pointer-events: auto;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
background: white;
color: #333;
box-shadow: 0 3px 14px rgba(0,0,0,0.4);
}
.leaflet-container a.leaflet-popup-close-button {
position: absolute;
top: 0;
right: 0;
border: none;
text-align: center;
width: 24px;
height: 24px;
font: 16px/24px Tahoma, Verdana, sans-serif;
color: #757575;
text-decoration: none;
background: transparent;
}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
color: #585858;
}
.leaflet-popup-scrolled {
overflow: auto;
}
.leaflet-oldie .leaflet-popup-content-wrapper {
-ms-zoom: 1;
}
.leaflet-oldie .leaflet-popup-tip {
width: 24px;
margin: 0 auto;
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
}
.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
border: 1px solid #999;
}
/* div icon */
.leaflet-div-icon {
background: #fff;
border: 1px solid #666;
}
/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
position: absolute;
padding: 6px;
background-color: #fff;
border: 1px solid #fff;
border-radius: 3px;
color: #222;
white-space: nowrap;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.leaflet-tooltip.leaflet-interactive {
cursor: pointer;
pointer-events: auto;
}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
position: absolute;
pointer-events: none;
border: 6px solid transparent;
background: transparent;
content: "";
}
/* Directions */
.leaflet-tooltip-bottom {
margin-top: 6px;
}
.leaflet-tooltip-top {
margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
left: 50%;
margin-left: -6px;
}
.leaflet-tooltip-top:before {
bottom: 0;
margin-bottom: -12px;
border-top-color: #fff;
}
.leaflet-tooltip-bottom:before {
top: 0;
margin-top: -12px;
margin-left: -6px;
border-bottom-color: #fff;
}
.leaflet-tooltip-left {
margin-left: -6px;
}
.leaflet-tooltip-right {
margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
top: 50%;
margin-top: -6px;
}
.leaflet-tooltip-left:before {
right: 0;
margin-right: -12px;
border-left-color: #fff;
}
.leaflet-tooltip-right:before {
left: 0;
margin-left: -12px;
border-right-color: #fff;
}
/* Printing */
@media print {
/* Prevent printers from removing background-images of controls. */
.leaflet-control {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}
.cn-map-widget[data-v-11d35e7b] {
position: relative;
width: 100%;
min-height: 200px;
}
.cn-map-widget__leaflet[data-v-11d35e7b] {
width: 100%;
height: 100%;
}
.cn-map-widget__fallback[data-v-11d35e7b] {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
min-height: 150px;
color: var(--color-text-maxcontrast);
}
.cn-map-widget__error[data-v-11d35e7b] {
font-size: 14px;
margin: 0;
}
.cn-map-widget__legend[data-v-11d35e7b] {
position: absolute;
top: 12px;
right: 12px;
z-index: 1000;
background: var(--color-main-background);
padding: 8px 12px;
border-radius: var(--border-radius-large, 8px);
box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
/* Fullscreen overlay. A CSS-fixed box rather than the Fullscreen API, so it needs
no permission prompt; the z-index clears the Nextcloud header. */
.cn-map-widget--fullscreen[data-v-11d35e7b] {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 3000;
}
/* Custom control bar (fit / locate / fullscreen), themed to Nextcloud rather than
Leaflet's default white-on-grey buttons.
::v-deep is required — Leaflet builds the control DOM via L.DomUtil.create, so
those nodes never receive this SFC's scoped data-v attribute. */
.cn-map-widget[data-v-11d35e7b] .cn-map-widget__control {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
color: var(--color-main-text);
background: var(--color-main-background);
}
.cn-map-widget[data-v-11d35e7b] .cn-map-widget__control:hover,
.cn-map-widget[data-v-11d35e7b] .cn-map-widget__control:focus-visible {
background: var(--color-background-hover);
}
.cn-object-geo-widget[data-v-4604f267] {
display: flex;
flex-direction: column;
}
/* Address search sits above the map; the result list overlays it rather than
pushing the map down, so the layout doesn't jump while typing. */
.cn-object-geo-widget__search[data-v-4604f267] {
position: relative;
display: flex;
align-items: center;
gap: 8px;
padding: calc(2 * var(--default-grid-baseline, 4px));
}
.cn-object-geo-widget__results[data-v-4604f267] {
position: absolute;
top: 100%;
left: calc(2 * var(--default-grid-baseline, 4px));
right: calc(2 * var(--default-grid-baseline, 4px));
z-index: 1000;
max-height: 220px;
overflow-y: auto;
margin: 0;
padding: 4px;
list-style: none;
background: var(--color-main-background);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-large, 8px);
box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
.cn-object-geo-widget__results button[data-v-4604f267] {
display: block;
width: 100%;
padding: 8px;
border: none;
border-radius: var(--border-radius, 4px);
background: transparent;
color: var(--color-main-text);
text-align: left;
font-size: 0.9em;
cursor: pointer;
}
.cn-object-geo-widget__results button[data-v-4604f267]:hover,
.cn-object-geo-widget__results button[data-v-4604f267]:focus-visible {
background: var(--color-background-hover);
}
.cn-object-geo-widget__hint[data-v-4604f267] {
margin: 0;
padding: calc(2 * var(--default-grid-baseline, 4px));
color: var(--color-text-maxcontrast);
font-size: 0.9em;
}
.cn-object-geo-widget__error[data-v-4604f267] {
margin: 0;
padding: calc(2 * var(--default-grid-baseline, 4px));
color: var(--color-error);
font-size: 0.85em;
}
.cn-object-geo-widget__footer[data-v-4604f267] {
display: flex;
align-items: center;
gap: calc(2 * var(--default-grid-baseline, 4px));
padding: calc(2 * var(--default-grid-baseline, 4px));
}
.cn-object-geo-widget__coords[data-v-4604f267] {
color: var(--color-text-maxcontrast);
font-size: 0.85em;
font-variant-numeric: tabular-nums;
}
.cn-object-geo-form[data-v-42affc2f] {
display: flex;
flex-direction: column;
gap: 12px;
}
.cn-object-geo-form__section[data-v-42affc2f] {
margin: 8px 0 0;
font-size: 0.8em;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--color-text-maxcontrast);
}
.cn-object-geo-form__hint[data-v-42affc2f] {
color: var(--color-text-maxcontrast);
font-size: 0.9em;
margin: 0;
}
.cn-fk-resolve-cell[data-v-471db666] {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cn-cell-renderer--uuid[data-v-37d7b88f] {
font-family: monospace;
font-size: 13px;
color: var(--color-text-maxcontrast);
}
.cn-cell-renderer--number[data-v-37d7b88f] {
font-variant-numeric: tabular-nums;
}
.cn-cell-renderer--date[data-v-37d7b88f] {
white-space: nowrap;
}
.cn-cell-renderer__dash[data-v-37d7b88f] {
color: var(--color-text-maxcontrast);
}
.cn-cell-renderer__icon--success[data-v-37d7b88f] {
color: var(--color-success);
}
.cn-cell-renderer__swatch-wrap[data-v-37d7b88f] {
display: inline-flex;
align-items: center;
gap: 8px;
}
.cn-cell-renderer__swatch-dot[data-v-37d7b88f] {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
flex-shrink: 0;
border: 1px solid var(--color-border-dark);
}
/* ========================================
@conduction/nextcloud-vue — Table Styles
======================================== */
/* Table Container */
.cn-table-container {
background: var(--color-main-background);
border-radius: var(--border-radius);
box-shadow: 0 2px 4px var(--color-box-shadow);
border: 1px solid var(--color-border);
margin-bottom: calc(5 * var(--default-grid-baseline));
}
/* Horizontal scroll for wide tables lives HERE, not on `.cn-table-container`.
`overflow-x: auto` on the container coerces its `overflow-y` from `visible`
to `auto` (CSS forbids mixing `visible` with a non-visible value), which
silently turns the container into the nearest scrollport. The sticky footer
below then anchors to a container that never scrolls, so "View all" scrolled
out of view with the rows instead of pinning to the bottom of the enclosing
widget card. Keeping the overflow on an inner wrapper leaves the container
transparent to scrolling, so the footer sticks to whichever ancestor really
scrolls. */
.cn-data-table__scroll {
overflow-x: auto;
}
.cn-table-container.cn-table-container--scrollable {
max-height: 400px;
overflow-y: auto;
}
/* Borderless: drop the card chrome so the table sits flush inside a parent that
already provides a card (e.g. a CnWidgetWrapper dashboard slot). Folded in
from the retired CnTableWidget. */
.cn-table-container.cn-table-container--borderless {
border: none;
border-radius: 0;
box-shadow: none;
background: transparent;
margin-bottom: 0;
}
/* Fill: grow to the full height of a flex-column card/widget content area and
push the footer to the bottom (via `margin-top: auto`) instead of letting it
float directly under a short list. When the list overflows, the container
grows past the parent and the sticky footer keeps it pinned. No-op when the
parent has no constrained height. */
.cn-table-container.cn-table-container--fill {
min-height: 100%;
display: flex;
flex-direction: column;
}
/* Optional card header + "View all" footer (folded from CnTableWidget). */
.cn-data-table__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-bottom: 1px solid var(--color-border);
}
.cn-data-table__title {
margin: 0;
font-size: 14px;
font-weight: 600;
}
.cn-data-table__count {
font-size: 12px;
color: var(--color-text-maxcontrast);
background: var(--color-background-dark);
padding: 2px 8px;
border-radius: 10px;
}
.cn-data-table__footer {
padding: 8px 16px;
border-top: 1px solid var(--color-border);
text-align: center;
/* Keep the footer (e.g. "+ New" / "View all") pinned to the bottom of the
scroll region so it stays reachable while a long list scrolls. Sticks to
whichever ancestor scrolls — the container's own `--scrollable` region
(max-height 400) or the enclosing widget card's content area. The opaque
background stops scrolling rows from showing through behind it. */
position: sticky;
bottom: 0;
background: var(--color-main-background);
}
/* Must follow the base `.cn-data-table__footer` rule above: it is the more
specific selector, and stylelint's no-descending-specificity forbids the
reverse order. Pushes the footer to the bottom of a `--fill` container
(see the flex-column block near the top of this file). */
.cn-table-container--fill .cn-data-table__footer {
margin-top: auto;
}
.cn-data-table__view-all {
font-size: 13px;
color: var(--color-primary-element);
cursor: pointer;
text-decoration: none;
}
.cn-data-table__view-all:hover {
text-decoration: underline;
}
/* Base Table */
.cn-data-table {
width: 100%;
border-collapse: collapse;
background-color: var(--color-main-background);
}
.cn-data-table th,
.cn-data-table td {
padding: calc(3 * var(--default-grid-baseline));
text-align: left;
border-bottom: 1px solid var(--color-border);
vertical-align: middle;
}
/* Opt-in fixed layout (CnDataTable's `fixedLayout` prop).
Under the default `table-layout: auto` a column's declared `width` is only a
hint: the browser sizes columns from their content, so one long unbreakable
value (a PHP FQCN, a UUID) widens its own column, and any column left unsized
soaks up every remaining pixel. `fixed` makes the declared widths
authoritative and splits what is left between the unsized columns.
`overflow-wrap: anywhere` is the necessary companion: with the column width
no longer negotiable, content that does not fit would otherwise paint past
the cell box and collide with the next column. Breaking mid-word keeps it
inside. Cells opting into `white-space: nowrap` (e.g. `cn-cell--end`) still
win, since that rule is more specific. */
.cn-data-table--fixed {
table-layout: fixed;
}
.cn-data-table--fixed th,
.cn-data-table--fixed td {
overflow-wrap: anywhere;
}
/* `overflow-wrap` on the cell is not enough on its own. CnCellRenderer wraps
every value in an INLINE span, whose box is sized by its own content rather
than by the cell, so a long unbreakable value (a URL, a PHP FQCN) makes the
span measurably wider than its `td` and paints over the next column —
exactly the overlap fixed layout was meant to end. Promoting the wrapper to
a block gives it the column's width, which is what the inherited
`overflow-wrap` needs to break against. `min-width: 0` stops it floor-ing at
its min-content size. */
.cn-data-table--fixed td > .cn-cell-renderer {
display: block;
min-width: 0;
}
.cn-data-table th {
background: var(--color-background-dark);
font-weight: 500;
color: var(--color-text-maxcontrast);
}
/* Reusable cell utilities — set on a column's `cellClass`. Handy for compact
list widgets (name + trailing status) that use `hideHeader`. */
.cn-data-table td.cn-cell--strong {
font-weight: 500;
}
.cn-data-table td.cn-cell--muted {
color: var(--color-text-maxcontrast);
}
.cn-data-table td.cn-cell--end {
text-align: right;
white-space: nowrap;
}
/* Single-line cell with a trailing ellipsis. For a value that is one long
unbreakable token — a URL, a fully-qualified class name — where wrapping is
worse than clipping: `overflow-wrap` would break it mid-token across three
lines and make every row that tall. The full text stays reachable through
the `title` tooltip CnCellRenderer already sets on the value.
The inner rule is the one that actually clips. `text-overflow` on a
`display: table-cell` box is unreliable, so the constraint is placed on
CnCellRenderer's own wrapper span, promoted to a block so it takes the
cell's width. Pair with `fixedLayout`, which is what gives the column a
width worth clipping against. */
.cn-data-table td.cn-cell--truncate {
overflow: hidden;
white-space: nowrap;
}
.cn-data-table td.cn-cell--truncate > .cn-cell-renderer {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cn-data-table th.cn-table-header--sortable {
cursor: pointer;
user-select: none;
transition: background-color var(--animation-quick) ease;
}
.cn-data-table th.cn-table-header--sortable:hover {
background-color: var(--color-background-hover);
}
.cn-table-sort-indicator {
margin-left: var(--default-grid-baseline);
opacity: 0.6;
}
/* A column carrying a `description` gets a dotted underline — the long-standing
convention for "there is an explanation here". Without it the tooltip is
undiscoverable: nobody hovers a header that gives no sign of having more to
say. `help` on the cursor rather than `pointer`, since hovering explains
rather than navigates; a sortable column keeps its own pointer cursor on the
th, which wins because it is the element actually being clicked. */
.cn-table-header--described {
text-decoration: underline dotted;
text-underline-offset: 3px;
text-decoration-color: var(--color-text-maxcontrast);
cursor: help;
}
.cn-data-table th.cn-table-header--sortable:focus-visible {
outline: 2px solid var(--color-main-text);
outline-offset: -2px;
}
/* Multi-column sort priority badge (1, 2, 3) — only rendered once more than
one sort key is active; a single active sort shows the arrow alone. */
.cn-table-sort-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 14px;
height: 14px;
margin-left: 2px;
padding: 0 3px;
border-radius: 7px;
background-color: var(--color-primary-element);
color: var(--color-primary-element-text);
font-size: 10px;
line-height: 14px;
font-weight: bold;
vertical-align: middle;
}
/* Row States */
.cn-table-row {
border-bottom: 1px solid var(--color-border);
cursor: pointer;
transition: background-color var(--animation-quick) ease;
}
.cn-table-row:hover {
background: var(--color-background-hover);
}
.cn-table-row--selected {
background-color: var(--color-primary-light);
box-shadow: inset 3px 0 0 0 var(--color-primary);
}
.cn-table-row--selected:hover {
background-color: var(--color-primary-light);
}
/* Column Types */
.cn-table-col--checkbox {
width: 50px;
text-align: center;
}
.cn-table-col--icon {
width: 40px;
padding-right: 0;
text-align: center;
color: var(--color-text-maxcontrast);
}
.cn-table-col--icon .material-design-icon {
display: inline-flex;
}
.cn-table-col--actions {
width: 120px;
text-align: center;
min-width: 120px;
}
.cn-table-col--constrained {
width: 150px;
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cn-table-col--expanded {
width: auto;
min-width: 200px;
}
.cn-table-col--title {
min-width: 120px;
max-width: 200px;
word-wrap: break-word;
overflow: hidden;
}
/* Loading State */
.cn-table-loading {
text-align: center;
padding: calc(12 * var(--default-grid-baseline));
}
.cn-table-loading p {
margin-top: calc(5 * var(--default-grid-baseline));
color: var(--color-text-maxcontrast);
}
/* Empty State (inside table) */
.cn-table-empty td {
text-align: center;
padding: calc(12 * var(--default-grid-baseline)) calc(6 * var(--default-grid-baseline));
color: var(--color-text-maxcontrast);
}
/* ========================================
Backwards compatibility aliases
(legacy OpenRegister CSS class names)
======================================== */
.viewTableContainer { background: var(--color-main-background); border-radius: var(--border-radius); overflow-x: hidden; overflow-y: visible; box-shadow: 0 2px 4px var(--color-box-shadow); border: 1px solid var(--color-border); margin-bottom: calc(5 * var(--default-grid-baseline)); }
.viewTableContainer.scrollable { max-height: 400px; overflow-y: auto; }
.viewTable { width: 100%; border-collapse: collapse; background-color: var(--color-main-background); }
.viewTable th, .viewTable td { padding: calc(3 * var(--default-grid-baseline)); text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.viewTable th { background: var(--color-background-hover); font-weight: 500; color: var(--color-text-maxcontrast); background-color: var(--color-background-dark); }
.viewTableRow { border-bottom: 1px solid var(--color-border); cursor: pointer; transition: background-color var(--animation-quick) ease; }
.viewTableRow:hover { background: var(--color-background-hover); }
.viewTableRow.active, .viewTableRowSelected { background: var(--color-primary-light); }
.tableColumnCheckbox { width: 50px; text-align: center; }
.tableColumnActions { width: 120px; text-align: center; min-width: 120px; }
.tableColumnConstrained { width: 150px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tableColumnExpanded { width: auto; min-width: 200px; }
.tableColumnTitle { min-width: 120px; max-width: 200px; word-wrap: break-word; overflow: hidden; }
.cn-row-action--destructive[data-v-5d9db5e2] {
color: var(--color-error) !important;
}
.cn-confirm__confirm[data-v-38241da0] {
padding: 4px 0;
}
.cn-widget-object-table[data-v-f6accf5e] {
width: 100%;
}
.cn-widget-object-table__footer[data-v-f6accf5e] {
display: flex;
gap: 4px;
padding: 4px 8px;
border-top: 1px solid var(--color-border);
}
.cn-widget-object-table__error[data-v-f6accf5e] {
color: var(--color-error);
font-size: 0.85em;
margin: 4px 8px 0;
}
.cn-object-list-form[data-v-125c318f] {
display: flex;
flex-direction: column;
gap: 12px;
}
.cn-object-list-form__section[data-v-125c318f] {
margin: 8px 0 0;
font-size: 0.8em;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--color-text-maxcontrast);
}
.cn-object-list-form__row2[data-v-125c318f] {
display: flex;
gap: 12px;
align-items: flex-end;
}
/* Share the row on a single line: controls grow to fill and shrink to fit. */
.cn-object-list-form__row2[data-v-125c318f] > * {
flex: 1 1 0;
min-width: 0;
}
/* The row limit is just a small number — pin it narrow (never grow/shrink) so
Sort by / Direction take the remaining width instead of an equal third. */
.cn-object-list-form__limit[data-v-125c318f] {
flex: 0 0 80px;
margin-block-end: 2px;
}
/* NcSelect defaults to min-width:260px, which would force the row to overflow
(horizontal scroll) in narrow panels; let the pickers shrink to share it. */
.cn-object-list-form__row2[data-v-125c318f] .v-select.select {
min-width: 0;
}
.cn-object-list-form__col-row[data-v-125c318f] .button-vue {
flex: 0 0 auto;
min-width: 0;
}
.cn-object-list-form__col-row__header[data-v-125c318f] {
margin-block-end: 2px;
}
.cn-audit-trail-form[data-v-41073462] {
display: flex;
flex-direction: column;
gap: 12px;
}
.cn-audit-trail-form__hint[data-v-41073462] {
margin: 0;
font-size: 0.85em;
color: var(--color-text-maxcontrast);
}
/* The widget already lives inside CnWidgetWrapper's padded card chrome. The
table is rendered `borderless` so CnDataTable drops its own border/shadow/
background AND its bottom margin (the `.cn-table-container--borderless`
modifier) — otherwise it reads as a card-in-a-card with dead space below.
Horizontal overflow is owned by `.cn-table-container` (overflow-x: auto); a
second scroll container here would produce a nested scrollbar, so this host
stays plain. */
.cn-object-list-widget[data-v-da58f8e2] {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
min-height: 0;
}
.cn-object-list-widget__table[data-v-da58f8e2] {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
/* Compact empty state (ADR-062): one quiet centered line — matches the
integration leaves' "No meetings" look — never a tall void. */
.cn-object-list-widget__empty[data-v-da58f8e2] {
color: var(--color-text-maxcontrast);
margin: 0;
padding: 24px 8px;
text-align: center;
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
}
.cn-object-list-widget__view-all[data-v-da58f8e2] {
align-self: flex-start;
background: none;
border: none;
color: var(--color-primary-element);
cursor: pointer;
font: inherit;
margin-top: 4px;
padding: 4px;
}
.cn-object-list-widget__view-all[data-v-da58f8e2]:hover,
.cn-object-list-widget__view-all[data-v-da58f8e2]:focus-visible {
text-decoration: underline;
}
.cn-object-list-widget__more[data-v-da58f8e2] {
color: var(--color-text-maxcontrast);
font-size: 0.85em;
margin: 4px 0 0;
padding: 4px;
}
/* Footer Add — same pattern as the integration leaves' footer action
("Open in Calendar"): full-width, centered, divider-topped, pinned to
the card bottom. */
.cn-object-list-widget__add[data-v-da58f8e2] {
align-self: stretch;
background: none;
border: none;
border-top: 1px solid var(--color-border);
color: var(--color-primary-element);
cursor: pointer;
font: inherit;
font-weight: 600;
/* Bleed through the host card's 16px content padding so the divider
spans edge-to-edge, exactly like the integration leaves' footer.
!important: Nextcloud server ships `#app-content button { margin:
3px … }` — an id-selector rule no scoped class can outrank. */
margin: auto -16px -16px !important;
padding: 12px 8px;
text-align: center;
}
.cn-object-list-widget__add[data-v-da58f8e2]:hover,
.cn-object-list-widget__add[data-v-da58f8e2]:focus-visible {
text-decoration: underline;
}
.cn-object-list-widget__error[data-v-da58f8e2] {
color: var(--color-text-maxcontrast);
font-size: 0.85em;
margin: 4px 0 0;
}
.cn-object-list-widget__prompt[data-v-da58f8e2] {
color: var(--color-text-maxcontrast);
font-style: italic;
padding: 16px 4px;
margin: 0;
text-align: center;
}
.cn-map-widget-form[data-v-67df777a] {
display: flex;
flex-direction: column;
gap: 12px;
}
.cn-map-widget-form__row[data-v-67df777a] {
display: flex;
gap: 8px;
}
.cn-map-widget-form__row[data-v-67df777a] > * {
flex: 1;
min-width: 0;
}
.cn-map-widget-form__hint[data-v-67df777a] {
color: var(--color-text-maxcontrast);
font-size: 90%;
margin: 0;
}
.cn-map-widget-form__field[data-v-67df777a] {
display: flex;
flex-direction: column;
gap: 4px;
}
.cn-map-widget-form__range[data-v-67df777a] {
width: 100%;
/* Native range inputs ship a default 2px margin on ALL sides. The left/right
2px pushes the width:100% track past the form and shows a phantom
horizontal scrollbar; zeroing it also drops the top/bottom 2px, which was
padding the form's height. */
margin: 0;
}
.cn-kb-search-widget[data-v-e34f66e2] {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
}
.cn-kb-search-widget__bound[data-v-e34f66e2],
.cn-kb-search-widget__status[data-v-e34f66e2],
.cn-kb-search-widget__empty[data-v-e34f66e2],
.cn-kb-search-widget__hint[data-v-e34f66e2] {
color: var(--color-text-maxcontrast);
font-size: 0.9em;
margin: 0;
}
.cn-kb-search-widget__bound[data-v-e34f66e2] {
font-style: italic;
}
.cn-kb-search-widget__results[data-v-e34f66e2] {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.cn-kb-search-widget__result[data-v-e34f66e2] {
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
padding: 8px 10px;
background: var(--color-main-background);
}
.cn-kb-search-widget__result-title[data-v-e34f66e2] {
font-weight: 600;
color: var(--color-main-text);
text-decoration: none;
}
.cn-kb-search-widget__result-title[data-v-e34f66e2]:hover {
color: var(--color-primary-element);
}
.cn-kb-search-widget__result-snippet[data-v-e34f66e2] {
font-size: 0.9em;
color: var(--color-text-maxcontrast);
margin-top: 4px;
}
.cn-interaction-form-widget[data-v-0650dea2] {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
}
.cn-interaction-form-widget__field[data-v-0650dea2] {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.cn-interaction-form-widget__label[data-v-0650dea2] {
font-weight: 500;
font-size: 0.9em;
}
.cn-interaction-form-widget__textarea[data-v-0650dea2] {
width: 100%;
min-height: 80px;
padding: 8px;
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
background: var(--color-main-background);
color: var(--color-main-text);
font: inherit;
resize: vertical;
}
.cn-interaction-form-widget__actions[data-v-0650dea2] {
display: flex;
gap: 8px;
justify-content: flex-end;
}
.cn-interaction-form-widget__error[data-v-0650dea2] {
color: var(--color-error);
margin: 0;
}
.cn-banner-widget[data-v-3531692f] {
width: 100%;
}
.cn-banner-widget__card[data-v-3531692f] {
margin: 0;
}
.cn-banner-widget__text--clickable[data-v-3531692f] {
cursor: pointer;
text-decoration: underline;
color: inherit;
}
.cn-banner-form[data-v-038574af] {
display: flex;
flex-direction: column;
gap: 12px;
}
.cn-banner-form__hint[data-v-038574af] {
margin: 0;
font-size: 0.85em;
color: var(--color-text-maxcontrast);
}
.cn-workspace-filter-widget[data-v-f0d5c1c6] {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
}
.cn-workspace-filter-widget__label[data-v-f0d5c1c6] {
margin: 0;
font-weight: 600;
color: var(--color-main-text);
}
.cn-workspace-filter-widget__status[data-v-f0d5c1c6] {
color: var(--color-text-maxcontrast);
font-size: 0.9em;
}
.cn-workspace-filter-widget__list[data-v-f0d5c1c6] {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.cn-workspace-filter-widget__count[data-v-f0d5c1c6] {
margin-inline-start: 6px;
padding: 0 6px;
border-radius: 999px;
background: var(--color-background-hover);
color: var(--color-text-maxcontrast);
font-size: 0.85em;
}
.cn-chart-widget[data-v-1c42daff] {
width: 100%;
min-height: 100px;
}
/* Container-fitting mode (`height` given as a percentage). The root claims the
full height it is given and lays its children out as a column; the canvas box
takes what is left, so the chart is sized by the box rather than sizing it.
`min-height: 0` drops the 100px floor — on a fixed-height surface a floor is
the thing that produces the overflow it was meant to prevent. */
.cn-chart-widget--fit[data-v-1c42daff] {
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
}
.cn-chart-widget__canvas[data-v-1c42daff] {
min-width: 0;
}
/* `flex: 1 1 0` (not `1 1 auto`) is load-bearing: with an `auto` basis the box
would grow to its content, i.e. to the chart, and the percentage height would
resolve against a box the chart itself defined. `overflow: hidden` keeps a
sub-pixel rounding difference from reintroducing a scrollbar. */
.cn-chart-widget--fit .cn-chart-widget__canvas[data-v-1c42daff] {
flex: 1 1 0;
min-height: 0;
overflow: hidden;
}
.cn-chart-widget__fallback[data-v-1c42daff] {
display: flex;
align-items: center;
justify-content: center;
min-height: 150px;
color: var(--color-text-maxcontrast);
}
.cn-chart-widget__empty[data-v-1c42daff] {
display: flex;
align-items: center;
justify-content: center;
min-height: 150px;
color: var(--color-text-maxcontrast);
font-size: 14px;
text-align: center;
padding: 12px;
}
/* The empty / fallback placeholders carry a 150px floor for the normal
content-sized case; in fit mode they take the leftover space and centre in it
instead, since the floor would overflow a short tile. Declared after the base
rules so the cascade order matches specificity (no-descending-specificity). */
.cn-chart-widget--fit .cn-chart-widget__empty[data-v-1c42daff],
.cn-chart-widget--fit .cn-chart-widget__fallback[data-v-1c42daff] {
flex: 1 1 0;
min-height: 0;
}
.cn-chart-widget__error[data-v-1c42daff] {
font-size: 14px;
margin: 0;
}
/* In-widget view switcher pills (views[] prop) — compact segmented row,
mirroring the dashboard date-range pill styling. */
.cn-chart-widget__views[data-v-1c42daff] {
display: flex;
gap: 4px;
margin-bottom: 6px;
justify-content: flex-end;
}
.cn-chart-widget__view-pill[data-v-1c42daff] {
padding: 2px 10px;
border: 1px solid var(--color-border);
border-radius: 999px;
background: var(--color-main-background);
color: var(--color-text-maxcontrast);
font-size: 12px;
cursor: pointer;
}
.cn-chart-widget__view-pill--active[data-v-1c42daff] {
background: var(--color-primary-element-light, #aad2ed);
color: var(--color-main-text);
border-color: var(--color-primary-element, #0082c9);
}
/* ─── ApexCharts HTML chrome ───────────────────────────────────────────────
Everything apexcharts draws INSIDE the SVG takes its colour from
`mergedOptions` (foreColor, grid.borderColor, legend.labels.colors, axis
label styles), so it already follows the Nextcloud theme. Its HTML chrome —
the hover tooltip, the crosshair axis tooltips, the toolbar menu — does not:
apexcharts styles those from a stylesheet it injects itself at chart-create
time (`\3c style id="apexcharts-css">`) using hardcoded hex values. In dark mode
the hover tooltip stayed a white box while its text inherited the near-white
`--color-main-text` — white on white, unreadable.
`tooltip.theme` is not the fix: both apexcharts themes are hardcoded
palettes, neither of them Nextcloud's, and choosing between them would need
JS theme detection that a themed or nldesign install would still get wrong.
Restyling with tokens means ONE rule set that is correct in light, dark,
high-contrast and custom themes, because the tokens flip themselves. Both
theme classes are listed so an `options.tooltip.theme` override cannot drop
a consumer back onto a hardcoded palette.
The specificity is deliberate. apexcharts injects its stylesheet when the
first chart is created, so it lands AFTER the app's CSS and wins every tie —
each override below therefore carries one more class than the apexcharts rule
it replaces, and holds even without the scope attribute this block compiles
with. */
.cn-chart-widget[data-v-1c42daff] .apexcharts-tooltip.apexcharts-theme-light,
.cn-chart-widget[data-v-1c42daff] .apexcharts-tooltip.apexcharts-theme-dark {
background: var(--color-main-background);
border: 1px solid var(--color-border);
color: var(--color-main-text);
box-shadow: 0 1px 5px var(--color-box-shadow, rgba(0, 0, 0, 0.2));
}
/* The title row is the date/category header ("Aug 26"). Its own background is
what made it unreadable rather than merely off-theme. */
.cn-chart-widget[data-v-1c42daff] .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title,
.cn-chart-widget[data-v-1c42daff] .apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title {
background: var(--color-background-hover);
border-bottom: 1px solid var(--color-border);
color: var(--color-main-text);
}
/* Crosshair axis tooltips. apexcharts puts light hex values on the BASE class
here and only overrides them for its dark theme, so the base rule has to be
replaced too — not just the theme variants. */
.cn-chart-widget[data-v-1c42daff] .apexcharts-xaxistooltip,
.cn-chart-widget[data-v-1c42daff] .apexcharts-yaxistooltip {
background: var(--color-main-background);
border: 1px solid var(--color-border);
color: var(--color-main-text);
}
/* Their pointer arrows are two stacked triangles: `::before` paints the border
edge, `::after` the fill. Both need the tokens the box above uses, or the
arrow keeps the old palette and reads as a stray light wedge. */
.cn-chart-widget[data-v-1c42daff] .apexcharts-xaxistooltip-bottom::after,
.cn-chart-widget[data-v-1c42daff] .apexcharts-xaxistooltip-top::after {
border-bottom-color: var(--color-main-background);
border-top-color: var(--color-main-background);
}
.cn-chart-widget[data-v-1c42daff] .apexcharts-xaxistooltip-bottom::before,
.cn-chart-widget[data-v-1c42daff] .apexcharts-xaxistooltip-top::before {
border-bottom-color: var(--color-border);
border-top-color: var(--color-border);
}
.cn-chart-widget[data-v-1c42daff] .apexcharts-yaxistooltip-left::after,
.cn-chart-widget[data-v-1c42daff] .apexcharts-yaxistooltip-right::after {
border-left-color: var(--color-main-background);
border-right-color: var(--color-main-background);
}
.cn-chart-widget[data-v-1c42daff] .apexcharts-yaxistooltip-left::before,
.cn-chart-widget[data-v-1c42daff] .apexcharts-yaxistooltip-right::before {
border-left-color: var(--color-border);
border-right-color: var(--color-border);
}
/* Toolbar menu — only reachable with `toolbar: true`, but the same defect: a
hardcoded `#fff` panel under inherited near-white text. */
.cn-chart-widget[data-v-1c42daff] .apexcharts-menu {
background: var(--color-main-background);
border: 1px solid var(--color-border);
color: var(--color-main-text);
}
.cn-chart-widget[data-v-1c42daff] .apexcharts-menu .apexcharts-menu-item:hover {
background: var(--color-background-hover);
}
/* Toolbar icons: `#6e8192` at rest and `#333` on hover, i.e. the hover state
vanishes against a dark background. One selector per icon class, matching
apexcharts' own list, to clear its (0,3,1) hover rules. */
.cn-chart-widget[data-v-1c42daff] .apexcharts-toolbar .apexcharts-menu-icon svg,
.cn-chart-widget[data-v-1c42daff] .apexcharts-toolbar .apexcharts-reset-icon svg,
.cn-chart-widget[data-v-1c42daff] .apexcharts-toolbar .apexcharts-selection-icon svg,
.cn-chart-widget[data-v-1c42daff] .apexcharts-toolbar .apexcharts-zoom-icon svg,
.cn-chart-widget[data-v-1c42daff] .apexcharts-toolbar .apexcharts-zoomin-icon svg,
.cn-chart-widget[data-v-1c42daff] .apexcharts-toolbar .apexcharts-zoomout-icon svg {
fill: var(--color-text-maxcontrast);
}
.cn-chart-widget[data-v-1c42daff] .apexcharts-toolbar .apexcharts-menu-icon:hover svg,
.cn-chart-widget[data-v-1c42daff] .apexcharts-toolbar .apexcharts-reset-icon:hover svg,
.cn-chart-widget[data-v-1c42daff] .apexcharts-toolbar .apexcharts-selection-icon:hover svg,
.cn-chart-widget[data-v-1c42daff] .apexcharts-toolbar .apexcharts-zoom-icon:hover svg,
.cn-chart-widget[data-v-1c42daff] .apexcharts-toolbar .apexcharts-zoomin-icon:hover svg,
.cn-chart-widget[data-v-1c42daff] .apexcharts-toolbar .apexcharts-zoomout-icon:hover svg {
fill: var(--color-main-text);
}
.cn-chart-widget-form[data-v-e74d3672] {
display: flex;
flex-direction: column;
gap: 12px;
}
.cn-chart-widget-form__section[data-v-e74d3672] {
margin: 8px 0 0;
font-size: 0.8em;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--color-text-maxcontrast);
}
.cn-chart-widget-form__hint[data-v-e74d3672] {
font-size: 0.85em;
color: var(--color-text-maxcontrast);
margin: 0;
}
.cn-chart-widget-form__row2[data-v-e74d3672] {
display: flex;
gap: 12px;
align-items: flex-end;
}
.cn-chart-widget-form__row2[data-v-e74d3672] > * {
flex: 1;
min-width: 0;
}
.cn-stats-block[data-v-722d9aef] {
background: var(--color-background-hover);
border-radius: var(--border-radius-large, 10px);
padding: 1rem;
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
color: inherit;
border: 2px solid transparent;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
height: 100%;
width: 100%;
box-sizing: border-box;
overflow: hidden;
min-width: 0;
}
/* Content */
.cn-stats-block__content[data-v-722d9aef] {
flex: 1;
min-width: 0;
text-align: center;
}
.cn-stats-block__count[data-v-722d9aef] {
display: flex;
align-items: baseline;
justify-content: center;
gap: 0.25rem;
font-size: 1.2rem;
margin-bottom: 0.25rem;
white-space: nowrap;
overflow: hidden;
}
.cn-stats-block--horizontal[data-v-722d9aef] {
flex-direction: row;
align-items: center;
gap: 12px;
}
.cn-stats-block--horizontal .cn-stats-block__content[data-v-722d9aef] {
text-align: left;
min-width: 0;
}
.cn-stats-block--horizontal .cn-stats-block__count[data-v-722d9aef] {
justify-content: flex-start;
}
.cn-stats-block--clickable[data-v-722d9aef] {
cursor: pointer;
}
.cn-stats-block--clickable[data-v-722d9aef]:hover {
border-color: var(--color-primary-element);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.cn-stats-block--clickable[data-v-722d9aef]:focus-visible {
outline: 2px solid var(--color-primary-element);
outline-offset: 2px;
}
/* Icon */
.cn-stats-block__icon[data-v-722d9aef] {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--color-primary-element-light, rgba(0, 130, 201, 0.1));
color: var(--color-primary-element);
flex-shrink: 0;
margin-bottom: 8px;
}
.cn-stats-block--horizontal .cn-stats-block__icon[data-v-722d9aef] {
margin-bottom: 0;
width: 36px;
height: 36px;
}
.cn-stats-block__icon--primary[data-v-722d9aef] {
background: var(--color-primary-element-light, rgba(0, 130, 201, 0.1));
color: var(--color-primary-element);
}
.cn-stats-block__icon--success[data-v-722d9aef] {
background: rgba(70, 186, 97, 0.1);
color: var(--color-element-success, var(--color-success));
}
.cn-stats-block__icon--warning[data-v-722d9aef] {
background: rgba(232, 163, 24, 0.1);
color: var(--color-element-warning, var(--color-warning));
}
.cn-stats-block__icon--error[data-v-722d9aef] {
background: rgba(224, 36, 36, 0.1);
color: var(--color-element-error, var(--color-error));
}
.cn-stats-block__header h4[data-v-722d9aef] {
margin-top: 0;
margin-bottom: 0.25rem;
color: var(--color-main-text);
font-size: 14px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cn-stats-block__count-value[data-v-722d9aef] {
font-size: 2rem;
font-weight: bold;
color: var(--color-primary-element);
flex-shrink: 0;
}
.cn-stats-block--primary .cn-stats-block__count-value[data-v-722d9aef] { color: var(--color-primary-element);
}
.cn-stats-block--success .cn-stats-block__count-value[data-v-722d9aef] { color: var(--color-element-success, var(--color-success));
}
.cn-stats-block--warning .cn-stats-block__count-value[data-v-722d9aef] { color: var(--color-element-warning, var(--color-warning));
}
.cn-stats-block--error .cn-stats-block__count-value[data-v-722d9aef] { color: var(--color-element-error, var(--color-error));
}
.cn-stats-block__count-label[data-v-722d9aef] {
color: var(--color-text-maxcontrast);
overflow: hidden;
text-overflow: ellipsis;
}
.cn-stats-block__loading[data-v-722d9aef] {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
color: var(--color-text-maxcontrast);
margin-bottom: 0.5rem;
}
.cn-stats-block__empty[data-v-722d9aef] {
text-align: center;
color: var(--color-text-maxcontrast);
font-style: italic;
margin-bottom: 0.5rem;
}
.cn-stats-block__breakdown[data-v-722d9aef] {
margin-top: 0.5rem;
padding: 0.75rem;
background: var(--color-background-hover);
border-radius: var(--border-radius);
border: 1px solid var(--color-border);
width: 100%;
}
.cn-stats-block__breakdown-item[data-v-722d9aef] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
}
.cn-stats-block__breakdown-item[data-v-722d9aef]:last-child {
margin-bottom: 0;
}
.cn-stats-block__breakdown-label[data-v-722d9aef] {
font-weight: 500;
color: var(--color-main-text);
}
.cn-stats-block__breakdown-value[data-v-722d9aef] {
font-weight: 600;
padding: 0.25rem 0.5rem;
border-radius: var(--border-radius);
background: var(--color-background-hover);
}
.cn-stats-block__breakdown-value--invalid[data-v-722d9aef] { color: var(--color-element-warning);
}
.cn-stats-block__breakdown-value--deleted[data-v-722d9aef] { color: var(--color-element-error);
}
.cn-stats-block__breakdown-value--published[data-v-722d9aef] { color: var(--color-element-success);
}
/* Multi-entry mode stacks N KPI tiles inside the one widget card. */
.cn-stats-block-widget--multi[data-v-4f8583ef] {
display: flex;
flex-direction: column;
gap: 8px;
}
.cn-stats-block-form[data-v-20f3b26f] {
display: flex;
flex-direction: column;
gap: 12px;
}
.cn-stats-block-form__section[data-v-20f3b26f] {
margin: 8px 0 0;
font-size: 0.8em;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--color-text-maxcontrast);
}
.cn-stats-block-form__row2[data-v-20f3b26f] {
display: flex;
gap: 12px;
align-items: flex-end;
}
.cn-stats-block-form__row2[data-v-20f3b26f] > * {
flex: 1;
min-width: 0;
}
.cn-related-objects-widget__group[data-v-44c2988f] {
padding: calc(2 * var(--default-grid-baseline, 4px)) 0;
}
.cn-related-objects-widget__group + .cn-related-objects-widget__group[data-v-44c2988f] {
border-top: 1px solid var(--color-border);
}
.cn-related-objects-widget__group-title[data-v-44c2988f] {
display: flex;
align-items: center;
gap: 6px;
margin: 0 0 4px;
padding: 0 calc(2 * var(--default-grid-baseline, 4px));
font-size: 0.8em;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--color-text-maxcontrast);
}
.cn-related-objects-widget__tabs[data-v-44c2988f] {
display: flex;
flex-wrap: wrap;
gap: 4px;
padding: calc(1.5 * var(--default-grid-baseline, 4px)) calc(2 * var(--default-grid-baseline, 4px));
border-bottom: 1px solid var(--color-border);
}
.cn-related-objects-widget__tab[data-v-44c2988f] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border: none;
border-radius: var(--border-radius-pill, 16px);
background: transparent;
color: var(--color-main-text);
cursor: pointer;
font-size: 0.9em;
}
.cn-related-objects-widget__tab[data-v-44c2988f]:hover {
background: var(--color-background-hover);
}
.cn-related-objects-widget__tab--active[data-v-44c2988f] {
background: var(--color-primary-element-light, var(--color-background-dark));
color: var(--color-primary-element-light-text, var(--color-main-text));
}
.cn-related-objects-widget__tab[data-v-44c2988f]:focus-visible {
outline: 2px solid var(--color-primary-element);
outline-offset: -2px;
}
.cn-related-objects-widget__tab-icon[data-v-44c2988f] {
flex: 0 0 auto;
}
.cn-related-objects-widget__panel-actions[data-v-44c2988f] {
display: flex;
justify-content: flex-end;
padding: 4px calc(2 * var(--default-grid-baseline, 4px)) 0;
}
.cn-related-objects-widget__open-sidebar[data-v-44c2988f] {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border: none;
background: transparent;
color: var(--color-primary-element);
cursor: pointer;
font-size: 0.85em;
}
.cn-related-objects-widget__open-sidebar[data-v-44c2988f]:hover {
text-decoration: underline;
}
.cn-related-objects-widget__count[data-v-44c2988f] {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 9px;
background: var(--color-background-dark);
font-size: 0.9em;
font-weight: 600;
}
.cn-related-objects-widget__list[data-v-44c2988f] {
list-style: none;
margin: 0;
padding: 0;
}
.cn-related-objects-widget__row[data-v-44c2988f] {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
padding: calc(1.5 * var(--default-grid-baseline, 4px)) calc(2 * var(--default-grid-baseline, 4px));
cursor: pointer;
border-radius: var(--border-radius);
}
.cn-related-objects-widget__detail[data-v-44c2988f] {
flex-basis: 100%;
margin: 4px 0 0 calc(20px + 10px);
padding: 8px 10px;
font-size: 0.9em;
white-space: pre-wrap;
overflow-wrap: anywhere;
color: var(--color-main-text);
background: var(--color-background-hover);
border-radius: var(--border-radius);
}
.cn-related-objects-widget__row[data-v-44c2988f]:hover {
background: var(--color-background-hover);
}
.cn-related-objects-widget__row[data-v-44c2988f]:focus-visible {
outline: 2px solid var(--color-primary-element);
outline-offset: -2px;
}
.cn-related-objects-widget__icon[data-v-44c2988f] {
flex: 0 0 auto;
color: var(--color-text-maxcontrast);
}
.cn-related-objects-widget__label[data-v-44c2988f] {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--color-main-text);
}
.cn-related-objects-widget__meta[data-v-44c2988f] {
flex: 0 0 auto;
font-size: 0.85em;
color: var(--color-text-maxcontrast);
}
.cn-related-objects-widget__chevron[data-v-44c2988f] {
flex: 0 0 auto;
color: var(--color-text-maxcontrast);
}
.cn-related-objects-widget__empty[data-v-44c2988f] {
padding: calc(3 * var(--default-grid-baseline, 4px)) calc(2 * var(--default-grid-baseline, 4px));
color: var(--color-text-maxcontrast);
font-style: italic;
}
.cn-related-objects-widget__empty-state[data-v-44c2988f] {
/* NcEmptyContent defaults to filling tall parents; inside a widget cell a
compact block reads better. */
padding: calc(4 * var(--default-grid-baseline, 4px)) 0;
margin: 0;
color: var(--color-text-maxcontrast);
}
.cn-related-objects-widget__footer[data-v-44c2988f] {
display: flex;
align-items: center;
gap: calc(2 * var(--default-grid-baseline, 4px));
padding: calc(2 * var(--default-grid-baseline, 4px));
}
.cn-related-objects-widget__add-error[data-v-44c2988f] {
color: var(--color-error);
font-size: 0.85em;
}
.cn-related-objects-widget__file-input[data-v-44c2988f] {
display: none;
}
.cn-related-form[data-v-1e766e8f] {
display: flex;
flex-direction: column;
gap: 12px;
}
.cn-related-form__section[data-v-1e766e8f] {
margin: 8px 0 0;
font-size: 0.8em;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--color-text-maxcontrast);
}
.cn-related-form__hint[data-v-1e766e8f] {
color: var(--color-text-maxcontrast);
font-size: 0.9em;
}
.cn-data-matrix[data-v-6e3e1a0f] {
display: flex;
flex-direction: column;
gap: 8px;
}
.cn-data-matrix__title[data-v-6e3e1a0f] {
margin: 0;
font-size: 1.1em;
}
.cn-data-matrix__description[data-v-6e3e1a0f] {
margin: 4px 0 0;
color: var(--color-text-maxcontrast);
}
.cn-data-matrix__scroller[data-v-6e3e1a0f] {
overflow-x: auto;
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
}
.cn-data-matrix__table[data-v-6e3e1a0f] {
width: 100%;
border-collapse: collapse;
font-size: 0.95em;
}
.cn-data-matrix__col-header[data-v-6e3e1a0f],
.cn-data-matrix__row-header-corner[data-v-6e3e1a0f],
.cn-data-matrix__total-header[data-v-6e3e1a0f] {
background: var(--color-background-hover);
text-align: left;
padding: 8px 10px;
font-weight: 600;
border-bottom: 1px solid var(--color-border);
border-right: 1px solid var(--color-border);
}
.cn-data-matrix__row-header[data-v-6e3e1a0f] {
background: var(--color-background-hover);
text-align: left;
padding: 6px 10px;
font-weight: 500;
border-right: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cn-data-matrix__cell[data-v-6e3e1a0f] {
padding: 0;
border-right: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
min-width: 80px;
}
.cn-data-matrix__cell--number[data-v-6e3e1a0f] {
text-align: right;
}
.cn-data-matrix__cell-value[data-v-6e3e1a0f] {
display: block;
padding: 6px 10px;
cursor: cell;
min-height: 28px;
}
.cn-data-matrix__cell--read-only .cn-data-matrix__cell-value[data-v-6e3e1a0f] {
cursor: default;
background: var(--color-background-hover);
}
.cn-data-matrix__cell-input[data-v-6e3e1a0f] {
width: 100%;
padding: 5px 10px;
border: 1px solid var(--color-primary-element);
background: var(--color-main-background);
outline: none;
font: inherit;
}
.cn-data-matrix__totals-row .cn-data-matrix__total-cell[data-v-6e3e1a0f],
.cn-data-matrix__total-header[data-v-6e3e1a0f] {
background: var(--color-background-darker, var(--color-background-hover));
font-weight: 600;
text-align: right;
padding: 6px 10px;
}
.cn-data-matrix__totals-label[data-v-6e3e1a0f] {
background: var(--color-background-darker, var(--color-background-hover));
font-weight: 600;
padding: 6px 10px;
text-align: left;
}
.cn-data-matrix__grand-total[data-v-6e3e1a0f] {
background: var(--color-primary-element-light);
}
.cn-data-matrix__empty[data-v-6e3e1a0f] {
color: var(--color-text-maxcontrast);
font-style: italic;
margin: 16px 0;
text-align: center;
}
.cn-settings-section__actions[data-v-036cb4ff] {
display: flex;
gap: 0.5rem;
align-items: center;
justify-content: flex-end;
float: right;
position: relative;
z-index: 10;
}
.cn-settings-section__content[data-v-036cb4ff] {
clear: both;
}
.cn-settings-section__description-text[data-v-036cb4ff] {
color: var(--color-text-maxcontrast);
margin-bottom: 16px;
}
.cn-settings-section__loading[data-v-036cb4ff] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 20px;
gap: 16px;
}
.cn-settings-section__loading p[data-v-036cb4ff] {
color: var(--color-text-maxcontrast);
font-size: 14px;
}
.cn-settings-section__error[data-v-036cb4ff] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 32px 20px;
gap: 16px;
background: var(--color-error-light);
border: 1px solid var(--color-error);
border-radius: var(--border-radius-large);
}
.cn-settings-section__error-message[data-v-036cb4ff] {
color: var(--color-error);
font-weight: 500;
margin: 0;
}
.cn-settings-section__empty[data-v-036cb4ff] {
padding: 40px 20px;
}
.cn-settings-section__empty-content[data-v-036cb4ff] {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
color: var(--color-text-maxcontrast);
}
.cn-settings-section__empty-content p[data-v-036cb4ff] {
margin: 0;
font-size: 14px;
}
.cn-settings-section__footer[data-v-036cb4ff] {
margin-top: 24px;
padding-top: 24px;
border-top: 1px solid var(--color-border);
}
@media (max-width: 768px) {
.cn-settings-section__actions[data-v-036cb4ff] {
position: static;
margin-top: 0;
margin-bottom: 1rem;
float: none;
flex-direction: column;
align-items: stretch;
}
}
.cn-structured-doc-review[data-v-1943d979] {
display: flex;
flex-direction: column;
gap: 12px;
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
padding: 16px;
background: var(--color-main-background);
}
.cn-structured-doc-review__title-row[data-v-1943d979] {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.cn-structured-doc-review__title[data-v-1943d979] {
margin: 0;
font-size: 1.2em;
}
.cn-structured-doc-review__description[data-v-1943d979] {
margin: 0;
color: var(--color-text-maxcontrast);
}
.cn-structured-doc-review__status[data-v-1943d979] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 10px;
border-radius: 9999px;
font-size: 0.85em;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.cn-structured-doc-review__status-dot[data-v-1943d979] {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
background: currentColor;
}
.cn-structured-doc-review__status--valid[data-v-1943d979],
.cn-structured-doc-review__status--approved[data-v-1943d979] {
background: var(--color-success-hover, rgba(0, 150, 0, 0.1));
color: var(--color-success);
}
.cn-structured-doc-review__status--invalid[data-v-1943d979],
.cn-structured-doc-review__status--rejected[data-v-1943d979] {
background: var(--color-error-hover, rgba(180, 0, 0, 0.1));
color: var(--color-error);
}
.cn-structured-doc-review__status--needs-review[data-v-1943d979],
.cn-structured-doc-review__status--pending[data-v-1943d979] {
background: var(--color-warning-hover, rgba(200, 130, 0, 0.1));
color: var(--color-warning);
}
.cn-structured-doc-review__status--unknown[data-v-1943d979] {
background: var(--color-background-hover);
color: var(--color-text-maxcontrast);
}
.cn-structured-doc-review__issues[data-v-1943d979] {
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
padding: 8px 12px;
background: var(--color-background-hover);
}
.cn-structured-doc-review__issues-title[data-v-1943d979] {
margin: 0 0 6px;
font-size: 0.9em;
}
.cn-structured-doc-review__issues ul[data-v-1943d979] {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 4px;
}
.cn-structured-doc-review__issue[data-v-1943d979] {
display: flex;
gap: 8px;
align-items: baseline;
font-size: 0.9em;
}
.cn-structured-doc-review__issue-severity[data-v-1943d979] {
text-transform: uppercase;
font-weight: 600;
font-size: 0.75em;
min-width: 56px;
}
.cn-structured-doc-review__issue--error .cn-structured-doc-review__issue-severity[data-v-1943d979] {
color: var(--color-error);
}
.cn-structured-doc-review__issue--warning .cn-structured-doc-review__issue-severity[data-v-1943d979] {
color: var(--color-warning);
}
.cn-structured-doc-review__issue--info .cn-structured-doc-review__issue-severity[data-v-1943d979] {
color: var(--color-primary-element);
}
.cn-structured-doc-review__issue-path[data-v-1943d979] {
font-family: monospace;
color: var(--color-text-maxcontrast);
}
.cn-structured-doc-review__body[data-v-1943d979] {
max-height: 480px;
overflow: auto;
}
.cn-structured-doc-review__decision[data-v-1943d979] {
display: flex;
flex-direction: column;
gap: 8px;
border-top: 1px solid var(--color-border);
padding-top: 12px;
}
.cn-structured-doc-review__textarea[data-v-1943d979] {
width: 100%;
padding: 6px 10px;
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
background: var(--color-main-background);
color: var(--color-main-text);
resize: vertical;
}
.cn-structured-doc-review__decision-actions[data-v-1943d979] {
display: flex;
gap: 8px;
justify-content: flex-end;
}
.cn-structured-doc-review__action[data-v-1943d979] {
padding: 6px 14px;
border-radius: var(--border-radius);
border: 1px solid var(--color-border);
cursor: pointer;
}
.cn-structured-doc-review__action--reject[data-v-1943d979] {
background: var(--color-error-hover, transparent);
color: var(--color-error);
}
.cn-structured-doc-review__action--approve[data-v-1943d979] {
background: var(--color-primary-element);
color: var(--color-primary-element-text, #fff);
border-color: var(--color-primary-element);
}
.cn-structured-doc-review__action[data-v-1943d979]:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.cn-config-card__status[data-v-51da0e47] {
display: flex;
gap: 8px;
margin-bottom: 12px;
}
.cn-config-card__content[data-v-51da0e47] {
margin-bottom: 8px;
}
.cn-config-card__footer[data-v-51da0e47] {
padding-top: 12px;
border-top: 1px solid var(--color-border);
}
.cn-version-info__card[data-v-3dc855b2] {
background: var(--color-background-hover);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-large);
padding: 20px;
margin-bottom: 20px;
}
.cn-version-info__card h4[data-v-3dc855b2] {
margin: 0 0 16px 0;
font-size: 16px;
font-weight: 600;
color: var(--color-main-text);
}
.cn-version-info__details[data-v-3dc855b2] {
display: flex;
flex-direction: column;
gap: 12px;
}
.cn-version-info__item[data-v-3dc855b2] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid var(--color-border);
}
.cn-version-info__item[data-v-3dc855b2]:last-child {
border-bottom: none;
}
.cn-version-info__label[data-v-3dc855b2] {
font-weight: 500;
color: var(--color-text-maxcontrast);
font-size: 14px;
}
.cn-version-info__value[data-v-3dc855b2] {
font-family: 'Courier New', Courier, monospace;
font-weight: 600;
color: var(--color-main-text);
font-size: 14px;
}
/* Status classes for values */
.cn-version-info__status--ok[data-v-3dc855b2] {
color: var(--color-success);
font-weight: 600;
}
.cn-version-info__status--warning[data-v-3dc855b2] {
color: var(--color-warning);
font-weight: 600;
}
.cn-version-info__status--error[data-v-3dc855b2] {
color: var(--color-error);
font-weight: 600;
}
@media (max-width: 768px) {
.cn-version-info__item[data-v-3dc855b2] {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.cn-version-info__label[data-v-3dc855b2] {
font-weight: 600;
}
.cn-version-info__value[data-v-3dc855b2] {
word-break: break-all;
}
}
.cn-credentials__intro[data-v-5de04c1a] {
margin-bottom: 16px;
color: var(--color-text-maxcontrast);
}
.cn-credentials__vault-link[data-v-5de04c1a],
.cn-credentials__howto-link[data-v-5de04c1a] {
white-space: nowrap;
color: var(--color-primary-element);
}
.cn-credentials__error[data-v-5de04c1a] {
margin-bottom: 12px;
}
.cn-credentials__section[data-v-5de04c1a] {
margin-bottom: 22px;
}
.cn-credentials__section-title[data-v-5de04c1a] {
margin: 8px 0 8px;
font-weight: bold;
}
.cn-credentials__muted[data-v-5de04c1a],
.muted[data-v-5de04c1a] {
color: var(--color-text-maxcontrast);
}
.cn-credentials__requests[data-v-5de04c1a],
.cn-credentials__list[data-v-5de04c1a] {
list-style: none;
margin: 0;
padding: 0;
}
.cn-credentials__request[data-v-5de04c1a] {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 0;
}
.cn-credentials__request-body[data-v-5de04c1a] {
display: flex;
flex-direction: column;
}
.cn-credentials__request-provider[data-v-5de04c1a] {
font-weight: bold;
}
.cn-credentials__request-reason[data-v-5de04c1a] {
color: var(--color-text-maxcontrast);
font-size: 0.9em;
}
/* Provider tile dot: a coloured badge with the provider's initial. */
.cn-credentials__tile-dot[data-v-5de04c1a] {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: var(--border-radius-large, 8px);
color: #fff;
font-weight: bold;
font-size: 0.95em;
line-height: 1;
}
.cn-credentials__tile-dot--lg[data-v-5de04c1a] {
width: 44px;
height: 44px;
font-size: 1.3em;
}
.cn-credentials__item[data-v-5de04c1a] {
padding: 12px 0;
border-bottom: 1px solid var(--color-border);
}
.cn-credentials__item-head[data-v-5de04c1a] {
display: flex;
align-items: center;
gap: 10px;
}
.cn-credentials__item-meta[data-v-5de04c1a] {
display: flex;
flex-direction: column;
flex-grow: 1;
min-width: 0;
}
.cn-credentials__item-name[data-v-5de04c1a] {
font-weight: bold;
}
.cn-credentials__item-provider[data-v-5de04c1a] {
color: var(--color-text-maxcontrast);
font-size: 0.9em;
}
.cn-credentials__item-actions[data-v-5de04c1a] {
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
.cn-credentials__item-toggle[data-v-5de04c1a] {
margin: 8px 0 0 42px;
}
.cn-credentials__also[data-v-5de04c1a] {
margin: 4px 0 0;
font-size: 0.9em;
}
.cn-credentials__item-apps[data-v-5de04c1a] {
margin-top: 8px;
width: 100%;
}
.cn-credentials__grid[data-v-5de04c1a] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 10px;
margin-bottom: 12px;
}
.cn-credentials__grid-tile[data-v-5de04c1a] {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 16px 8px;
background: var(--color-background-hover);
border: 2px solid var(--color-border);
border-radius: var(--border-radius-large, 8px);
cursor: pointer;
}
.cn-credentials__grid-tile[data-v-5de04c1a]:hover,
.cn-credentials__grid-tile[data-v-5de04c1a]:focus-visible {
border-color: var(--color-primary-element);
background: var(--color-background-dark);
}
.cn-credentials__grid-title[data-v-5de04c1a] {
font-weight: bold;
text-align: center;
}
.cn-credentials__wizard-head[data-v-5de04c1a] {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.cn-credentials__wizard-title[data-v-5de04c1a] {
font-weight: bold;
font-size: 1.1em;
}
.cn-credentials__howto[data-v-5de04c1a] {
margin-bottom: 12px;
}
.cn-credentials__form[data-v-5de04c1a] {
display: flex;
flex-direction: column;
gap: 12px;
}
.cn-credentials__addnote[data-v-5de04c1a] {
margin: 0;
font-size: 0.9em;
}
.cn-credentials__form-actions[data-v-5de04c1a],
.cn-credentials__wizard-actions[data-v-5de04c1a] {
display: flex;
justify-content: flex-end;
gap: 8px;
}
.cn-wizard-dialog__progress[data-v-27d51a62] {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 0;
padding: 8px 0 4px;
margin: 0 0 20px;
list-style: none;
}
.cn-wizard-dialog__progress-item[data-v-27d51a62] {
position: relative;
flex: 1 1 0;
min-width: 0;
max-width: 180px;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
text-align: center;
color: var(--color-text-maxcontrast);
font-size: 0.8125rem;
}
.cn-wizard-dialog__progress-item--clickable[data-v-27d51a62] {
cursor: pointer;
}
/* Marker circle */
.cn-wizard-dialog__progress-dot[data-v-27d51a62] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
border: 2px solid var(--color-border-dark);
background: var(--color-main-background);
color: var(--color-text-maxcontrast);
font-size: 14px;
font-weight: 600;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
z-index: 1;
}
.cn-wizard-dialog__progress-check[data-v-27d51a62] {
font-size: 16px;
line-height: 1;
}
.cn-wizard-dialog__progress-label[data-v-27d51a62] {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Connector line between this marker and the next, centered on the marker. */
.cn-wizard-dialog__progress-connector[data-v-27d51a62] {
position: absolute;
top: 17px;
left: calc(50% + 21px);
right: calc(-50% + 21px);
height: 2px;
background: var(--color-border-dark);
}
.cn-wizard-dialog__progress-connector--done[data-v-27d51a62] {
background: var(--color-primary-element);
}
/* States */
.cn-wizard-dialog__progress-item--active .cn-wizard-dialog__progress-dot[data-v-27d51a62] {
border-color: var(--color-primary-element);
background: var(--color-primary-element);
color: var(--color-primary-element-text, #fff);
}
.cn-wizard-dialog__progress-item--active .cn-wizard-dialog__progress-label[data-v-27d51a62] {
color: var(--color-main-text);
font-weight: 600;
}
.cn-wizard-dialog__progress-item--done .cn-wizard-dialog__progress-dot[data-v-27d51a62] {
border-color: var(--color-primary-element);
background: var(--color-primary-element);
color: var(--color-primary-element-text, #fff);
}
.cn-wizard-dialog__progress-item--done .cn-wizard-dialog__progress-label[data-v-27d51a62] {
color: var(--color-main-text);
}
.cn-wizard-dialog__progress-item--clickable:hover .cn-wizard-dialog__progress-label[data-v-27d51a62] {
color: var(--color-primary-element);
}
.cn-wizard-dialog__step-body[data-v-27d51a62] {
min-height: 200px;
}
.cn-wizard-dialog__result[data-v-27d51a62] {
display: flex;
flex-direction: column;
gap: 12px;
}
.cn-setup-step[data-v-75b2078b] {
display: flex;
flex-direction: column;
gap: 12px;
}
.cn-setup-step__nav[data-v-75b2078b] {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 8px;
}
.cn-setup-field[data-v-75b2078b] {
display: flex;
flex-direction: column;
}
.cn-setup-summary[data-v-75b2078b] {
list-style: none;
padding: 0;
margin: 0;
}
.cn-setup-summary__item[data-v-75b2078b] {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 0;
color: var(--color-text-maxcontrast);
}
.cn-setup-summary__item--done[data-v-75b2078b] {
color: var(--color-main-text);
}
.cn-setup-summary__mark[data-v-75b2078b] {
font-weight: bold;
color: var(--color-success);
}
.cn-setup-summary__label[data-v-75b2078b] {
flex: 0 0 auto;
}
.cn-setup-summary__value[data-v-75b2078b] {
margin-inline-start: auto;
font-weight: 600;
color: var(--color-main-text);
}
.cn-suggest-feature-modal[data-v-0d64bdb1] {
display: flex;
flex-direction: column;
gap: 16px;
padding: 8px 0;
}
.cn-suggest-feature-modal__intro[data-v-0d64bdb1],
.cn-suggest-feature-modal__forge-info[data-v-0d64bdb1] {
margin: 0;
}
.cn-suggest-feature-modal__intro-body[data-v-0d64bdb1],
.cn-suggest-feature-modal__forge-info-body[data-v-0d64bdb1] {
margin: 6px 0 0 0;
line-height: 1.45;
}
.cn-admin-settings-shell[data-v-260aa222] {
max-width: 900px;
}
.cn-support-info[data-v-260aa222] {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--color-border);
}
.cn-support-info h4[data-v-260aa222] {
margin: 0 0 8px 0;
font-size: 14px;
font-weight: 600;
color: var(--color-main-text);
}
.cn-support-info p[data-v-260aa222] {
margin: 4px 0;
color: var(--color-text-maxcontrast);
font-size: 14px;
}
.cn-support-info a[data-v-260aa222] {
color: var(--color-primary-element);
}
.cn-object-card[data-v-6f672c8f] {
display: flex;
gap: 12px;
padding: 16px;
background: var(--color-main-background);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-large, 10px);
cursor: pointer;
transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.cn-object-card[data-v-6f672c8f]:hover {
border-color: var(--color-primary-element);
box-shadow: 0 2px 8px var(--color-box-shadow);
}
.cn-object-card--selected[data-v-6f672c8f] {
border-color: var(--color-primary-element);
background: var(--color-primary-element-light);
}
.cn-object-card__checkbox[data-v-6f672c8f] {
flex-shrink: 0;
padding-top: 2px;
}
.cn-object-card__content[data-v-6f672c8f] {
flex: 1;
min-width: 0;
}
.cn-object-card__header[data-v-6f672c8f] {
display: flex;
gap: 12px;
align-items: flex-start;
}
.cn-object-card__image[data-v-6f672c8f] {
width: 48px;
height: 48px;
border-radius: var(--border-radius);
object-fit: cover;
flex-shrink: 0;
}
.cn-object-card__title-area[data-v-6f672c8f] {
flex: 1;
min-width: 0;
}
.cn-object-card__title[data-v-6f672c8f] {
margin: 0;
font-size: 16px;
font-weight: 600;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cn-object-card__description[data-v-6f672c8f] {
margin: 4px 0 0;
font-size: 13px;
color: var(--color-text-maxcontrast);
line-height: 1.4;
}
.cn-object-card__badges[data-v-6f672c8f] {
margin-top: 8px;
}
.cn-object-card__metadata[data-v-6f672c8f] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 8px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--color-border);
}
.cn-object-card__meta-item[data-v-6f672c8f] {
display: flex;
flex-direction: column;
gap: 2px;
}
.cn-object-card__meta-label[data-v-6f672c8f] {
font-size: 11px;
font-weight: 500;
color: var(--color-text-maxcontrast);
text-transform: uppercase;
letter-spacing: 0.3px;
}
.cn-object-card__actions[data-v-6f672c8f] {
flex-shrink: 0;
}
.cn-card-grid__grid[data-v-1d1f4122] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 16px;
}
/* A card slot whose component renders nothing (e.g. a custom card that hides
itself with `v-if` for a client-side filter) leaves an empty grid item that
would still occupy a grid track and a row gap — pushing the visible cards
down with a large blank gap above them. Collapse those empty cells so the
remaining cards start at the top. A comment-only node (`v-if` false) still
matches `:empty` per the CSS spec, so this catches the v-if-hidden case. */
.cn-card-grid__item[data-v-1d1f4122]:empty {
display: none;
}
.cn-card-grid__loading[data-v-1d1f4122] {
display: flex;
justify-content: center;
padding: 40px;
}
.cn-card-grid__empty[data-v-1d1f4122] {
padding: 40px 20px;
text-align: center;
}
.cn-object-row[data-v-25c9f9b1] {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 12px;
border-bottom: 1px solid var(--color-border);
cursor: pointer;
}
.cn-object-row[data-v-25c9f9b1]:hover {
background-color: var(--color-background-hover);
}
.cn-object-row--selected[data-v-25c9f9b1] {
/* Inset accent — never border-left (would shift cell content). */
box-shadow: inset 3px 0 0 0 var(--color-primary-element);
background-color: var(--color-primary-element-light);
}
.cn-object-row__checkbox[data-v-25c9f9b1] {
flex-shrink: 0;
}
.cn-object-row__icon[data-v-25c9f9b1] {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
color: var(--color-text-maxcontrast);
}
.cn-object-row__image[data-v-25c9f9b1] {
width: 24px;
height: 24px;
object-fit: contain;
border-radius: var(--border-radius);
}
.cn-object-row__main[data-v-25c9f9b1] {
display: flex;
flex-direction: column;
min-width: 0;
flex: 1;
}
.cn-object-row__title[data-v-25c9f9b1] {
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cn-object-row__subtitle[data-v-25c9f9b1] {
font-size: 13px;
color: var(--color-text-maxcontrast);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cn-object-row__badges[data-v-25c9f9b1] {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 6px;
}
.cn-object-row__actions[data-v-25c9f9b1] {
flex-shrink: 0;
display: flex;
align-items: center;
}
.cn-object-list__rows[data-v-f55c7962] {
display: flex;
flex-direction: column;
border-top: 1px solid var(--color-border);
}
/* A list-item slot whose component renders nothing (e.g. a v-if client-side
filter) still matches :empty per the CSS spec — collapse it so it leaves no
ghost row / divider. */
.cn-object-list__item[data-v-f55c7962]:empty {
display: none;
}
.cn-object-list__loading[data-v-f55c7962] {
display: flex;
justify-content: center;
padding: 40px;
}
.cn-object-list__empty[data-v-f55c7962] {
padding: 40px 20px;
text-align: center;
}
.cn-object-kanban__loading[data-v-3523a46f],
.cn-object-kanban__empty[data-v-3523a46f] {
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
}
.cn-object-kanban__board[data-v-3523a46f] {
display: flex;
gap: 16px;
overflow-x: auto;
padding-bottom: 8px;
}
.cn-object-kanban__column[data-v-3523a46f] {
display: flex;
flex-direction: column;
flex: 0 0 280px;
min-width: 280px;
background: var(--color-background-dark);
border-radius: var(--border-radius-large, 10px);
padding: 8px;
}
.cn-object-kanban__column-header[data-v-3523a46f] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px;
font-weight: 600;
}
.cn-object-kanban__column-count[data-v-3523a46f] {
color: var(--color-text-maxcontrast);
font-weight: 400;
}
.cn-object-kanban__column-cards[data-v-3523a46f] {
display: flex;
flex-direction: column;
gap: 8px;
min-height: 40px;
}
.cn-object-kanban__card[data-v-3523a46f] {
background: var(--color-main-background);
border: 1px solid var(--color-border);
border-radius: var(--border-radius, 8px);
padding: 10px;
cursor: grab;
transition: opacity 0.15s ease;
}
.cn-object-kanban__card--pending[data-v-3523a46f] {
opacity: 0.6;
}
.cn-object-kanban__card-title[data-v-3523a46f] {
font-weight: 500;
cursor: pointer;
}
.cn-object-kanban__card-fields[data-v-3523a46f] {
margin-top: 6px;
display: flex;
flex-direction: column;
gap: 2px;
font-size: 13px;
color: var(--color-text-maxcontrast);
}
.cn-object-kanban__load-more[data-v-3523a46f] {
display: flex;
justify-content: center;
padding-top: 8px;
}
.cn-object-calendar__header[data-v-bea31862] {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 8px 0 16px;
}
.cn-object-calendar__title[data-v-bea31862] {
min-width: 160px;
text-align: center;
font-weight: 600;
font-size: 16px;
text-transform: capitalize;
}
.cn-object-calendar__loading[data-v-bea31862] {
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
}
.cn-object-calendar__month[data-v-bea31862] {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 1px;
background: var(--color-border);
border: 1px solid var(--color-border);
border-radius: var(--border-radius, 8px);
overflow: hidden;
}
.cn-object-calendar__month-header[data-v-bea31862] {
background: var(--color-background-dark);
padding: 6px 8px;
font-size: 12px;
font-weight: 600;
text-align: center;
color: var(--color-text-maxcontrast);
}
.cn-object-calendar__month-cell[data-v-bea31862] {
background: var(--color-main-background);
min-height: 90px;
padding: 4px;
display: flex;
flex-direction: column;
gap: 2px;
}
.cn-object-calendar__month-cell.is-other-month[data-v-bea31862] {
background: var(--color-background-hover);
color: var(--color-text-maxcontrast);
}
.cn-object-calendar__month-day[data-v-bea31862] {
font-size: 12px;
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.cn-object-calendar__month-cell.is-today .cn-object-calendar__month-day[data-v-bea31862] {
background: var(--color-primary-element);
color: var(--color-primary-element-text);
border-radius: 50%;
}
.cn-object-calendar__month-events[data-v-bea31862] {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.cn-object-calendar__event[data-v-bea31862] {
font-size: 11px;
padding: 1px 4px;
border-radius: 4px;
background: var(--color-primary-element-light);
color: var(--color-main-text);
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cn-object-calendar__overflow[data-v-bea31862] {
font-size: 11px;
color: var(--color-text-maxcontrast);
padding: 0 4px;
}
.cn-folder-tree[data-v-5ba0e7af] {
list-style: none;
margin: 0;
padding: 0;
}
.cn-folder-tree__children[data-v-5ba0e7af] {
padding-inline-start: 16px;
}
.cn-folder-tree__item[data-v-5ba0e7af] {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 6px 8px;
border: none;
border-radius: var(--border-radius);
background: transparent;
color: var(--color-main-text);
font-size: inherit;
text-align: start;
cursor: pointer;
}
.cn-folder-tree__item[data-v-5ba0e7af]:hover {
background-color: var(--color-background-hover);
}
.cn-folder-tree__item--active[data-v-5ba0e7af] {
background-color: var(--color-primary-element-light);
font-weight: 600;
}
.cn-folder-tree__name[data-v-5ba0e7af] {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cn-folder-tree__count[data-v-5ba0e7af] {
flex-shrink: 0;
font-size: 12px;
color: var(--color-text-maxcontrast);
}
.cn-folder-sidebar[data-v-0cc3d5d2] {
display: flex;
flex-direction: column;
gap: 4px;
}
.cn-folder-sidebar__title[data-v-0cc3d5d2] {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
color: var(--color-text-maxcontrast);
padding: 4px 8px;
}
.cn-folder-sidebar__all[data-v-0cc3d5d2] {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 6px 8px;
border: none;
border-radius: var(--border-radius);
background: transparent;
color: var(--color-main-text);
font-size: inherit;
text-align: start;
cursor: pointer;
}
.cn-folder-sidebar__all[data-v-0cc3d5d2]:hover {
background-color: var(--color-background-hover);
}
.cn-folder-sidebar__all--active[data-v-0cc3d5d2] {
background-color: var(--color-primary-element-light);
font-weight: 600;
}
.cn-folder-sidebar__all-label[data-v-0cc3d5d2] {
flex: 1;
min-width: 0;
}
.cn-folder-sidebar__loading[data-v-0cc3d5d2] {
display: flex;
justify-content: center;
padding: 12px;
}
.cn-folder-sidebar__new[data-v-0cc3d5d2] {
margin-top: 8px;
}
.cn-facet-sidebar[data-v-202f66e2] {
padding: 16px;
border-right: 1px solid var(--color-border);
min-width: 240px;
max-width: 300px;
}
.cn-facet-sidebar__header[data-v-202f66e2] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.cn-facet-sidebar__title[data-v-202f66e2] {
margin: 0;
font-size: 15px;
font-weight: 600;
}
.cn-facet-sidebar__loading[data-v-202f66e2] {
display: flex;
justify-content: center;
padding: 20px;
}
.cn-facet-sidebar__filters[data-v-202f66e2] {
display: flex;
flex-direction: column;
gap: 16px;
}
.cn-facet-sidebar__group[data-v-202f66e2] {
display: flex;
flex-direction: column;
gap: 4px;
}
.cn-facet-sidebar__label[data-v-202f66e2] {
font-size: 12px;
font-weight: 500;
color: var(--color-text-maxcontrast);
text-transform: uppercase;
letter-spacing: 0.3px;
}
.cn-facet-sidebar__select[data-v-202f66e2] {
width: 100%;
}
.cn-federation-status[data-v-6ac9b70f] {
display: flex;
flex-direction: column;
gap: 12px;
padding: 12px;
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
background: var(--color-main-background);
}
.cn-federation-status__title[data-v-6ac9b70f] {
margin: 0;
font-size: 1.1em;
}
.cn-federation-status__description[data-v-6ac9b70f] {
margin: 4px 0 0;
color: var(--color-text-maxcontrast);
font-size: 0.9em;
}
.cn-federation-status__summary[data-v-6ac9b70f] {
display: flex;
gap: 12px;
flex-wrap: wrap;
font-size: 0.85em;
}
.cn-federation-status__summary-item[data-v-6ac9b70f] {
display: inline-flex;
align-items: center;
gap: 6px;
}
.cn-federation-status__dot[data-v-6ac9b70f] {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
}
.cn-federation-status__dot--up[data-v-6ac9b70f] {
background: var(--color-success);
}
.cn-federation-status__dot--degraded[data-v-6ac9b70f] {
background: var(--color-warning);
}
.cn-federation-status__dot--down[data-v-6ac9b70f] {
background: var(--color-error);
}
.cn-federation-status__dot--unknown[data-v-6ac9b70f] {
background: var(--color-text-maxcontrast);
}
.cn-federation-status__empty[data-v-6ac9b70f] {
color: var(--color-text-maxcontrast);
font-style: italic;
text-align: center;
margin: 16px 0;
}
.cn-federation-status__list[data-v-6ac9b70f] {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 4px;
}
.cn-federation-status__node[data-v-6ac9b70f] {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 8px 12px;
border-radius: var(--border-radius);
cursor: pointer;
background: var(--color-background-hover);
}
.cn-federation-status__node[data-v-6ac9b70f]:hover {
background: var(--color-background-darker, var(--color-background-hover));
}
.cn-federation-status__node-dot[data-v-6ac9b70f] {
margin-top: 6px;
flex-shrink: 0;
}
.cn-federation-status__node-body[data-v-6ac9b70f] {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1 1 auto;
min-width: 0;
}
.cn-federation-status__node-name[data-v-6ac9b70f] {
font-weight: 600;
}
.cn-federation-status__node-url[data-v-6ac9b70f] {
font-family: monospace;
color: var(--color-text-maxcontrast);
}
.cn-federation-status__node-message[data-v-6ac9b70f] {
color: var(--color-text-maxcontrast);
}
.cn-federation-status__node-checked[data-v-6ac9b70f] {
color: var(--color-text-maxcontrast);
font-size: 0.85em;
}
.cn-federation-status__node-label[data-v-6ac9b70f] {
font-size: 0.85em;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-maxcontrast);
margin-top: 6px;
}
/* Selector is deliberately two classes deep. `.cn-context-menu` lands on
NcActions' root, which NcActions itself styles as `.action-item[data-v-…]
{ position: relative; display: inline-block }`. Scoped CSS appends the attr
to the last compound only, so a bare `.cn-context-menu` tied that rule at
specificity (0,2,0) and lost on injection order — the trigger stayed
`position: relative`, so it kept its in-flow box (top/left just offset it
visually) and showed up as a full-width ~34px-tall phantom row between the
table and the pagination on CnIndexPage. Adding the parent class makes this
(0,3,0) so it wins regardless of order. */
.cn-context-menu-root > .cn-context-menu[data-v-1bef81d7] {
/* Hide the NcActions trigger button — menu opens only via right-click.
Off-screen rather than display:none / visibility:hidden so NcPopover's
a11y check (`tabbable(triggerContainer)[0]`) still finds the NcButton
and the "custom button as a
trigger" warning stays quiet.
Avoid `clip` / `clip-path` here — modern browsers' `Element.checkVisibility()`,
which tabbable calls into, treats those as invisible. Pure offscreen
positioning leaves the element fully "visible" to layout while being
off the user's screen. */
position: absolute;
top: -9999px;
left: -9999px;
opacity: 0;
pointer-events: none;
}
.cn-context-menu__backdrop[data-v-1bef81d7] {
position: fixed;
inset: 0;
z-index: 9998;
}
.cn-context-menu__panel[data-v-1bef81d7] {
position: fixed;
top: var(--cn-ctx-menu-y, 0);
left: var(--cn-ctx-menu-x, 0);
z-index: 9999;
min-width: 220px;
padding: 4px;
background: var(--color-main-background);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-large, 12px);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
outline: none;
}
._passwordDialog_joix2_2 {
display: flex;
flex-direction: column;
gap: 10px 0;
margin-inline: 6px;
margin-block-end: 6px;
}
.cn-menu-tree__row[data-v-3187ef1d] {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 6px;
border-radius: var(--border-radius);
}
.cn-menu-tree__row[data-v-3187ef1d]:hover {
background: var(--color-background-hover);
}
.cn-menu-tree__handle[data-v-3187ef1d] {
display: inline-flex;
align-items: center;
cursor: grab;
color: var(--color-text-maxcontrast);
flex-shrink: 0;
}
.cn-menu-tree__icon-btn[data-v-3187ef1d] {
background: none;
border: none;
padding: 0;
cursor: pointer;
flex-shrink: 0;
}
.cn-menu-tree__icon[data-v-3187ef1d] {
display: inline-block;
width: 20px;
height: 20px;
background-size: 16px;
background-position: center;
background-repeat: no-repeat;
opacity: 0.7;
}
.cn-menu-tree__icon--generic[data-v-3187ef1d] {
border-radius: 50%;
background: var(--color-border-dark);
}
.cn-menu-tree__label[data-v-3187ef1d] {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 500;
}
.cn-menu-tree__label--btn[data-v-3187ef1d] {
background: none;
border: none;
text-align: left;
cursor: text;
font: inherit;
color: inherit;
padding: 4px;
border-radius: var(--border-radius);
}
.cn-menu-tree__label--btn[data-v-3187ef1d]:hover {
background: var(--color-background-dark);
}
.cn-menu-tree__page[data-v-3187ef1d] {
flex-shrink: 0;
font-size: 0.8em;
color: var(--color-text-maxcontrast);
}
.cn-menu-tree__page--btn[data-v-3187ef1d] {
background: none;
border: none;
cursor: pointer;
padding: 4px 6px;
border-radius: var(--border-radius);
}
.cn-menu-tree__page--btn[data-v-3187ef1d]:hover {
background: var(--color-background-dark);
}
.cn-menu-tree__inline-field[data-v-3187ef1d] {
flex: 1 1 auto;
}
.cn-menu-tree__inline-select[data-v-3187ef1d] {
min-width: 160px;
flex-shrink: 0;
}
.cn-menu-tree__config[data-v-3187ef1d] {
display: flex;
flex-direction: column;
gap: 6px;
padding: 10px;
min-width: 180px;
}
.cn-menu-tree__icon-opt[data-v-3187ef1d] {
display: inline-flex;
align-items: center;
gap: 8px;
}
.cn-menu-tree__icon-glyph[data-v-3187ef1d] {
display: inline-block;
width: 16px;
height: 16px;
background-size: 16px;
background-position: center;
background-repeat: no-repeat;
opacity: 0.8;
}
.cn-menu-tree[data-v-426b854f] {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.cn-menu-tree__children[data-v-426b854f] {
list-style: none;
margin: 4px 0 0 28px;
padding: 0 0 0 8px;
border-left: 2px solid var(--color-border);
display: flex;
flex-direction: column;
gap: 4px;
}
.cn-menu-tree__children--empty[data-v-426b854f] {
min-height: 10px;
margin-top: 0;
border-left-color: transparent;
}
.cn-menu-tree__node[data-v-426b854f] {
list-style: none;
}
.cn-page-tree__item[data-v-2e1c95c6] {
display: flex;
flex-direction: column;
}
.cn-page-tree__row[data-v-2e1c95c6] {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 6px;
border-radius: var(--border-radius);
}
.cn-page-tree__row[data-v-2e1c95c6]:hover {
background: var(--color-background-hover);
}
.cn-page-tree__handle[data-v-2e1c95c6] {
display: inline-flex;
align-items: center;
cursor: grab;
color: var(--color-text-maxcontrast);
flex-shrink: 0;
}
.cn-page-tree__icon[data-v-2e1c95c6] {
display: inline-flex;
align-items: center;
color: var(--color-text-maxcontrast);
flex-shrink: 0;
}
.cn-page-tree__label[data-v-2e1c95c6] {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 500;
}
.cn-page-tree__label--btn[data-v-2e1c95c6] {
background: none;
border: none;
text-align: left;
cursor: text;
font: inherit;
color: inherit;
padding: 4px;
border-radius: var(--border-radius);
}
.cn-page-tree__label--btn[data-v-2e1c95c6]:hover {
background: var(--color-background-dark);
}
.cn-page-tree__type[data-v-2e1c95c6] {
flex-shrink: 0;
font-size: 0.8em;
color: var(--color-text-maxcontrast);
}
.cn-page-tree__type--btn[data-v-2e1c95c6] {
background: none;
border: none;
cursor: pointer;
padding: 4px 6px;
border-radius: var(--border-radius);
}
.cn-page-tree__type--btn[data-v-2e1c95c6]:hover {
background: var(--color-background-dark);
}
.cn-page-tree__inline-field[data-v-2e1c95c6] {
flex: 1 1 auto;
}
.cn-page-tree__inline-select[data-v-2e1c95c6] {
min-width: 160px;
flex-shrink: 0;
}
.cn-page-tree__panel[data-v-2e1c95c6] {
display: flex;
flex-direction: column;
gap: 10px;
margin: 4px 0 8px 34px;
padding: 12px;
border: 1px solid var(--color-border);
border-radius: var(--border-radius-large, 8px);
background: var(--color-background-hover);
}
.cn-page-tree__panel-actions[data-v-2e1c95c6] {
display: flex;
justify-content: space-between;
gap: 8px;
border-top: 1px solid var(--color-border);
padding-top: 8px;
}
.cn-page-tree[data-v-783a7f4f] {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.cn-page-tree__children[data-v-783a7f4f] {
list-style: none;
margin: 4px 0 0 28px;
padding: 0 0 0 8px;
border-left: 2px solid var(--color-border);
display: flex;
flex-direction: column;
gap: 4px;
}
/* Keep an empty child list as a visible drop target for nesting. */
.cn-page-tree__children--empty[data-v-783a7f4f] {
min-height: 10px;
margin-top: 0;
border-left-color: transparent;
}
.cn-page-tree__node[data-v-783a7f4f] {
list-style: none;
}
.cn-edit-settings__hint[data-v-7cbf6b68] {
color: var(--color-text-maxcontrast);
margin: 0 0 12px;
}
.cn-edit-settings__group[data-v-7cbf6b68] {
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
padding: 12px;
display: flex;
flex-direction: column;
gap: 12px;
margin: 12px 0 0;
}
.cn-edit-settings__legend[data-v-7cbf6b68] {
font-weight: 600;
padding: 0 6px;
}
.cn-edit-sidebar__subtitle[data-v-4ac4e083] {
margin: 16px 0 8px;
}
.cn-edit-sidebar__tabs[data-v-4ac4e083] {
display: flex;
flex-direction: column;
gap: 6px;
list-style: none;
padding: 0;
margin: 0;
}
.cn-edit-sidebar__tab[data-v-4ac4e083] {
border: 1px solid var(--color-border);
border-radius: var(--border-radius-large);
padding: 12px;
display: flex;
flex-direction: column;
gap: 8px;
}
.cn-edit-sidebar__tab-row[data-v-4ac4e083] {
display: flex;
align-items: flex-end;
gap: 8px;
}
.cn-edit-sidebar__content[data-v-4ac4e083] {
display: flex;
flex-direction: column;
gap: 4px;
}
.cn-edit-actions__list[data-v-13336802] {
display: flex;
flex-direction: column;
gap: 12px;
}
.cn-edit-actions__row[data-v-13336802] {
display: flex;
gap: 8px;
align-items: flex-end;
padding-bottom: 12px;
border-bottom: 1px solid var(--color-border);
}
.cn-edit-actions__fields[data-v-13336802] {
display: flex;
gap: 8px;
flex: 1 1 auto;
flex-wrap: wrap;
}
.cn-edit-actions__row-actions[data-v-13336802] {
display: flex;
gap: 2px;
}
.cn-add-widget-modal__type[data-v-5292e590] {
display: flex;
flex-direction: column;
gap: 6px;
}
.cn-add-widget-modal__type-label[data-v-5292e590] {
font-size: 14px;
font-weight: 500;
}
.cn-add-widget-modal__type-select[data-v-5292e590] {
padding: 8px 12px;
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
background: var(--color-main-background);
color: var(--color-main-text);
font-size: 14px;
}
.cn-add-widget-modal__form[data-v-5292e590] {
overflow-y: auto;
/* Prefer a roomy ~340px for the type-specific fields (data-driven widgets
carry tall forms — columns, thresholds, data source); still shrinks with
its own scroll on short viewports so the Appearance + actions stay visible. */
flex: 1 1 340px;
min-height: 0;
}
.cn-add-widget-modal__empty[data-v-5292e590] {
padding: 16px;
text-align: center;
color: var(--color-text-maxcontrast);
}
.cn-add-widget-modal__chrome[data-v-5292e590] {
display: flex;
flex-direction: column;
gap: 10px;
border-top: 1px solid var(--color-border);
padding-top: 12px;
}
.cn-add-widget-modal__chrome-title[data-v-5292e590] {
margin: 0;
font-size: 15px;
font-weight: 600;
color: var(--color-text-maxcontrast);
}
.cn-add-widget-modal__chrome-row[data-v-5292e590] {
display: flex;
align-items: center;
gap: 12px;
}
.cn-add-widget-modal__chrome-label[data-v-5292e590] {
min-width: 96px;
font-size: 14px;
}
.cn-add-widget-modal__chrome-value[data-v-5292e590] {
font-size: 13px;
color: var(--color-text-maxcontrast);
}
/* Result phase container */
.cn-tabbed-form-dialog__result[data-v-b02baba2] {
padding: 16px 0;
}
/* Form phase container */
.cn-tabbed-form-dialog__form[data-v-b02baba2] {
display: flex;
flex-direction: column;
gap: 8px;
}
/* Tabs wrapper */
.cn-tabbed-form-dialog__tabs[data-v-b02baba2] {
display: flex;
flex-direction: column;
gap: 12px;
}
/* Tab content area — also uses .form-editor for compatibility */
.cn-tabbed-form-dialog__tab-content[data-v-b02baba2] {
display: flex;
flex-direction: column;
gap: 16px;
padding: 16px 0;
}
/* Create another checkbox — push to the left in actions area */
.cn-tabbed-form-dialog__create-another[data-v-b02baba2] {
margin-right: auto;
}
/* Bootstrap-Vue tab container styling */
.tabContainer > * ul > li[data-v-b02baba2] {
display: flex;
flex: 1;
}
.tabContainer > * ul > li[data-v-b02baba2]:hover {
background-color: var(--color-background-hover);
}
.tabContainer > * ul > li > a[data-v-b02baba2] {
flex: 1;
text-align: center;
}
.tabContainer > * ul > li > .active[data-v-b02baba2] {
background: transparent !important;
color: var(--color-main-text) !important;
border-bottom: var(--default-grid-baseline) solid var(--color-primary-element) !important;
}
.tabContainer > * ul[role="tablist"][data-v-b02baba2] {
display: flex;
margin: 10px 8px 0 8px;
justify-content: space-between;
border-bottom: 1px solid var(--color-border);
}
.tabContainer > * ul[role="tablist"] > * a[role="tab"][data-v-b02baba2] {
padding-inline-start: 10px;
padding-inline-end: 10px;
padding-block-start: 10px;
padding-block-end: 10px;
}
.tabContainer > * div[role="tabpanel"][data-v-b02baba2] {
margin-block-start: var(--OR-margin-10);
}
[data-v-b02baba2] .nav-tabs {
border-bottom: 1px solid var(--color-border);
margin-bottom: 15px;
display: flex;
}
[data-v-b02baba2] .nav-tabs .nav-item {
display: flex;
flex: 1;
}
[data-v-b02baba2] .nav-tabs .nav-link {
flex: 1;
text-align: center;
border: none;
border-bottom: 2px solid transparent;
color: var(--color-text-maxcontrast);
padding: 8px 16px;
display: flex;
align-items: center;
gap: 8px;
justify-content: center;
}
[data-v-b02baba2] .nav-tabs .nav-link.active {
color: var(--color-main-text);
border-bottom: 2px solid var(--color-primary);
background-color: transparent;
}
[data-v-b02baba2] .nav-tabs .nav-link:hover {
border-bottom: 2px solid var(--color-border);
}
[data-v-b02baba2] .nav-tabs .nav-link.disabled {
cursor: not-allowed;
opacity: 0.5;
color: var(--color-text-maxcontrast);
pointer-events: auto;
}
[data-v-b02baba2] .nav-tabs .nav-link.disabled * {
cursor: not-allowed;
}
[data-v-b02baba2] .nav-tabs .nav-link.disabled:hover {
border-bottom: 2px solid transparent;
}
[data-v-b02baba2] .tab-content {
padding: 16px;
background-color: var(--color-main-background);
}
/* Hand-rolled tab nav — replaces the bootstrap-vue BTabs/BTab pair to
eliminate the bootstrap-vue → bootstrap@4 → jquery missing-peer chain
in consumer SBOM. Visual parity with the legacy .nav-tabs above. */
.cn-tabbed-form-dialog__tab-nav[data-v-b02baba2] {
display: flex;
gap: 0;
list-style: none;
padding: 0;
margin: 0;
border-bottom: 1px solid var(--color-border);
}
.cn-tabbed-form-dialog__tab-nav-item[data-v-b02baba2] {
flex: 1 1 0;
}
.cn-tabbed-form-dialog__tab-button[data-v-b02baba2] {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
padding: 10px 14px;
background: transparent;
border: 0;
border-bottom: 2px solid transparent;
color: var(--color-text-maxcontrast);
font: inherit;
cursor: pointer;
}
.cn-tabbed-form-dialog__tab-button[data-v-b02baba2]:hover:not(:disabled) {
border-bottom-color: var(--color-border);
color: var(--color-main-text);
}
.cn-tabbed-form-dialog__tab-button.is-active[data-v-b02baba2] {
color: var(--color-main-text);
border-bottom-color: var(--color-primary);
}
/* stylelint-disable-next-line no-descending-specificity */
.cn-tabbed-form-dialog__tab-button[data-v-b02baba2]:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.notecard[data-v-1c454822] {
--note-card-icon-size: 20px;
--note-card-padding: calc(2 * var(--default-grid-baseline));
color: var(--color-main-text) !important;
background-color: var(--note-background) !important;
border-inline-start: var(--default-grid-baseline) solid var(--note-theme);
border-radius: var(--border-radius-small);
margin: 1rem 0;
padding: var(--note-card-padding);
display: flex;
flex-direction: row;
gap: var(--note-card-padding);
}
.notecard__heading[data-v-1c454822] {
font-size: var(--note-card-icon-size); /* Same as icon */
font-weight: 600;
}
.notecard__icon[data-v-1c454822] {
color: var(--note-theme);
}
.notecard__icon--heading[data-v-1c454822] {
font-size: var(--note-card-icon-size);
/* Ensure icon is on the same height as the heading */
margin-block: calc((1lh - 1em) / 2) auto;
}
.notecard--success[data-v-1c454822] {
--note-background: var(--color-success);
--note-theme: var(--color-success-text);
}
.notecard--info[data-v-1c454822] {
--note-background: var(--color-info);
--note-theme: var(--color-info-text);
}
.notecard--error[data-v-1c454822] {
--note-background: var(--color-error);
--note-theme: var(--color-error-text);
}
.notecard--warning[data-v-1c454822] {
--note-background: var(--color-warning);
--note-theme: var(--color-warning-text);
}
/* NcDialog supplies the padding and the heading (via `name`); this div keeps only
the body's own column layout. */
.cn-edit-data[data-v-309e1a7e] {
display: flex;
flex-direction: column;
gap: 16px;
min-height: 280px;
}
.cn-edit-data__subtitle[data-v-309e1a7e] {
margin: 0;
font-size: 1em;
font-weight: 600;
}
.cn-edit-data__loading[data-v-309e1a7e] {
margin: 40px auto;
}
.cn-edit-data__error[data-v-309e1a7e] {
color: var(--color-error);
padding: 8px 12px;
background-color: var(--color-background-hover);
border-radius: var(--border-radius);
}
.cn-edit-data__confirm[data-v-309e1a7e] {
padding: 12px;
background-color: var(--color-background-hover);
border-radius: var(--border-radius);
}
.cn-edit-data__confirm-lead[data-v-309e1a7e] {
font-weight: bold;
margin-bottom: 4px;
}
/* The breaking-change confirmation is a warning, not a destruction. */
.cn-edit-data__confirm--breaking[data-v-309e1a7e] {
border-inline-start: 4px solid var(--color-warning, var(--color-primary));
}
.cn-edit-data__breaking-list[data-v-309e1a7e] {
margin: 0 0 8px;
padding-inline-start: 20px;
list-style: disc;
}
.cn-edit-data__breaking-list li[data-v-309e1a7e] {
color: var(--color-text-maxcontrast);
font-family: var(--font-face-monospace, monospace);
font-size: 90%;
}
.cn-edit-data__confirm-note[data-v-309e1a7e] {
color: var(--color-text-maxcontrast);
margin-bottom: 12px;
}
.cn-edit-data__confirm-actions[data-v-309e1a7e] {
display: flex;
justify-content: flex-end;
gap: 8px;
}
.cn-edit-data__empty[data-v-309e1a7e] {
display: flex;
flex-direction: column;
gap: 12px;
align-items: flex-start;
}
.cn-edit-data__register[data-v-309e1a7e] {
display: flex;
align-items: center;
gap: 8px;
}
.cn-edit-data__register-name[data-v-309e1a7e] {
color: var(--color-text-maxcontrast);
}
.cn-edit-data__register-rename[data-v-309e1a7e] {
max-width: 360px;
}
.cn-edit-data__schemas[data-v-309e1a7e] {
display: flex;
flex-direction: column;
gap: 12px;
}
.cn-edit-data__schemas-head[data-v-309e1a7e] {
display: flex;
justify-content: space-between;
align-items: center;
}
.cn-edit-data__hint[data-v-309e1a7e] {
color: var(--color-text-maxcontrast);
margin: 0;
}
.cn-edit-data__list[data-v-309e1a7e] {
display: flex;
flex-direction: column;
gap: 4px;
}
.cn-edit-data__row[data-v-309e1a7e] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
}
.cn-edit-data__schema-name[data-v-309e1a7e] {
display: flex;
flex-direction: column;
}
.cn-edit-data__schema-meta[data-v-309e1a7e] {
font-size: 0.8em;
color: var(--color-text-maxcontrast);
}
.cn-edit-data__row-actions[data-v-309e1a7e] {
display: flex;
gap: 4px;
}
.cn-flow-node-edit[data-v-e107484a] {
display: flex;
flex-direction: column;
gap: 12px;
padding-block-end: 8px;
}
.cn-flow-node-edit__description[data-v-e107484a] {
color: var(--color-text-maxcontrast);
}
.cn-flow-node-edit__id[data-v-e107484a],
.cn-flow-node-edit__hint[data-v-e107484a] {
font-size: 0.85em;
color: var(--color-text-maxcontrast);
}
.cn-flow-node-edit__advanced summary[data-v-e107484a] {
cursor: pointer;
color: var(--color-text-maxcontrast);
margin-block-end: 8px;
}
.cn-flow-node[data-v-4b186e5f] {
position: relative;
min-width: 140px;
padding: 8px 12px;
border: 2px solid var(--color-border, #d0d0d0);
border-radius: var(--border-radius-large, 8px);
background: var(--color-main-background, #fff);
color: var(--color-main-text, #222);
}
.cn-flow-node[data-v-4b186e5f]:focus-visible {
outline: 2px solid var(--color-primary-element, #0082c9);
outline-offset: 2px;
}
.cn-flow-node--selected[data-v-4b186e5f] {
border-color: var(--color-primary-element, #0082c9);
}
.cn-flow-node__label[data-v-4b186e5f] {
font-weight: 600;
}
.cn-flow-node__handle[data-v-4b186e5f] {
width: 10px;
height: 10px;
background: var(--color-primary-element, #0082c9);
}
/* The armed port is RINGED, not merely coloured: colour alone is not an
accessible state indicator, and this is the cue that tells a keyboard user
which branch the next `c` will connect. */
.cn-flow-node__handle--armed[data-v-4b186e5f] {
outline: 3px solid var(--color-warning, #c28900);
outline-offset: 2px;
}
/* `pointer-events` is OFF on the layer EdgeLabelRenderer creates, so that the
layer does not swallow clicks meant for the canvas underneath. A control in
it has to turn them back on for itself. */
.cn-flow-edge__layer[data-v-6367d89a] {
position: absolute;
display: flex;
align-items: center;
gap: 6px;
}
.cn-flow-edge__adornment[data-v-6367d89a] {
pointer-events: all;
display: flex;
align-items: center;
gap: 4px;
}
.cn-flow-edge__label[data-v-6367d89a] {
pointer-events: all;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 10px;
border: 1px solid var(--color-border, #d0d0d0);
border-radius: 11px;
background: var(--color-main-background, #fff);
color: var(--color-main-text, #222);
font-size: 11px;
line-height: 18px;
white-space: nowrap;
cursor: grab;
}
.cn-flow-edge__label[data-v-6367d89a]:focus-visible {
outline: 2px solid var(--color-primary-element, #0082c9);
outline-offset: 1px;
}
.cn-flow-edge__label--dragging[data-v-6367d89a] {
cursor: grabbing;
}
/* Vue Flow's own stylesheet, themed through Nextcloud variables. Imported
un-scoped because it styles elements Vue Flow renders outside this
component's scope. */
.vue-flow {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
direction: ltr;
}
.vue-flow__container {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
.vue-flow__pane {
z-index: 1;
}
.vue-flow__pane.draggable {
cursor: grab;
}
.vue-flow__pane.selection {
cursor: pointer;
}
.vue-flow__pane.dragging {
cursor: grabbing;
}
.vue-flow__transformationpane {
transform-origin: 0 0;
z-index: 2;
pointer-events: none;
}
.vue-flow__viewport {
z-index: 4;
overflow: clip;
}
.vue-flow__selection {
z-index: 6;
}
.vue-flow__edge-labels {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.vue-flow__nodesselection-rect:focus,
.vue-flow__nodesselection-rect:focus-visible {
outline: none;
}
.vue-flow .vue-flow__edges {
pointer-events: none;
overflow: visible;
}
.vue-flow__edge-path,
.vue-flow__connection-path {
stroke: #b1b1b7;
stroke-width: 1;
fill: none;
}
.vue-flow__edge {
pointer-events: visibleStroke;
cursor: pointer;
}
.vue-flow__edge.animated path {
stroke-dasharray: 5;
animation: dashdraw 0.5s linear infinite;
}
.vue-flow__edge.animated path.vue-flow__edge-interaction {
stroke-dasharray: none;
animation: none;
}
.vue-flow__edge.inactive {
pointer-events: none;
}
.vue-flow__edge.selected,
.vue-flow__edge:focus,
.vue-flow__edge:focus-visible {
outline: none;
}
.vue-flow__edge.selected .vue-flow__edge-path,
.vue-flow__edge:focus .vue-flow__edge-path,
.vue-flow__edge:focus-visible .vue-flow__edge-path {
stroke: #555;
}
.vue-flow__edge-textwrapper {
pointer-events: all;
}
.vue-flow__edge-textbg {
fill: white;
}
.vue-flow__edge-text {
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.vue-flow__connection {
pointer-events: none;
}
.vue-flow__connection .animated {
stroke-dasharray: 5;
animation: dashdraw 0.5s linear infinite;
}
.vue-flow__connectionline {
z-index: 1001;
}
.vue-flow__nodes {
pointer-events: none;
transform-origin: 0 0;
}
.vue-flow__node {
position: absolute;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
pointer-events: all;
transform-origin: 0 0;
box-sizing: border-box;
cursor: default;
}
.vue-flow__node.draggable {
cursor: grab;
pointer-events: all;
}
.vue-flow__node.draggable.dragging {
cursor: grabbing;
}
.vue-flow__nodesselection {
z-index: 3;
transform-origin: left top;
pointer-events: none;
}
.vue-flow__nodesselection-rect {
position: absolute;
pointer-events: all;
cursor: grab;
}
.vue-flow__nodesselection-rect.dragging {
cursor: grabbing;
}
.vue-flow__handle {
position: absolute;
pointer-events: none;
min-width: 5px;
min-height: 5px;
}
.vue-flow__handle.connectable {
pointer-events: all;
cursor: crosshair;
}
.vue-flow__handle-bottom {
left: 50%;
bottom: 0;
transform: translate(-50%, 50%);
}
.vue-flow__handle-top {
left: 50%;
top: 0;
transform: translate(-50%, -50%);
}
.vue-flow__handle-left {
top: 50%;
left: 0;
transform: translate(-50%, -50%);
}
.vue-flow__handle-right {
top: 50%;
right: 0;
transform: translate(50%, -50%);
}
.vue-flow__edgeupdater {
cursor: move;
pointer-events: all;
}
.vue-flow__panel {
position: absolute;
z-index: 5;
margin: 15px;
}
.vue-flow__panel.top {
top: 0;
}
.vue-flow__panel.bottom {
bottom: 0;
}
.vue-flow__panel.left {
left: 0;
}
.vue-flow__panel.right {
right: 0;
}
.vue-flow__panel.center {
left: 50%;
transform: translateX(-50%);
}
@keyframes dashdraw {
from {
stroke-dashoffset: 10;
}
}
:root {
--vf-node-bg: #fff;
--vf-node-text: #222;
--vf-connection-path: #b1b1b7;
--vf-handle: #555;
}
.vue-flow__edge.updating .vue-flow__edge-path {
stroke: #777;
}
.vue-flow__edge-text {
font-size: 10px;
}
.vue-flow__edge-textbg {
fill: #fff;
}
.vue-flow__connection-path {
stroke: var(--vf-connection-path);
}
.vue-flow__node {
cursor: grab;
}
.vue-flow__node.selectable:focus,
.vue-flow__node.selectable:focus-visible {
outline: none;
}
.vue-flow__node-default,
.vue-flow__node-input,
.vue-flow__node-output {
padding: 10px;
border-radius: 3px;
width: 150px;
font-size: 12px;
text-align: center;
border-width: 1px;
border-style: solid;
color: var(--vf-node-text);
background-color: var(--vf-node-bg);
border-color: var(--vf-node-color);
}
.vue-flow__node-default.selected,
.vue-flow__node-default.selected:hover,
.vue-flow__node-input.selected,
.vue-flow__node-input.selected:hover,
.vue-flow__node-output.selected,
.vue-flow__node-output.selected:hover {
box-shadow: 0 0 0 0.5px var(--vf-box-shadow);
}
.vue-flow__node-default.selected,
.vue-flow__node-default:focus,
.vue-flow__node-default:focus-visible,
.vue-flow__node-input.selected,
.vue-flow__node-input:focus,
.vue-flow__node-input:focus-visible,
.vue-flow__node-output.selected,
.vue-flow__node-output:focus,
.vue-flow__node-output:focus-visible {
outline: none;
border: 1px solid #555;
}
.vue-flow__node-default .vue-flow__handle, .vue-flow__node-input .vue-flow__handle, .vue-flow__node-output .vue-flow__handle {
background: var(--vf-handle);
}
.vue-flow__node-default.selectable:hover, .vue-flow__node-input.selectable:hover, .vue-flow__node-output.selectable:hover {
box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
}
.vue-flow__node-input {
--vf-node-color: var(--vf-node-color, #0041d0);
--vf-handle: var(--vf-node-color, #0041d0);
--vf-box-shadow: var(--vf-node-color, #0041d0);
background: var(--vf-node-bg);
border-color: var(--vf-node-color, #0041d0);
}
.vue-flow__node-input.selected,
.vue-flow__node-input:focus,
.vue-flow__node-input:focus-visible {
outline: none;
border: 1px solid var(--vf-node-color, #0041d0);
}
.vue-flow__node-default {
--vf-handle: var(--vf-node-color, #1a192b);
--vf-box-shadow: var(--vf-node-color, #1a192b);
background: var(--vf-node-bg);
border-color: var(--vf-node-color, #1a192b);
}
.vue-flow__node-default.selected,
.vue-flow__node-default:focus,
.vue-flow__node-default:focus-visible {
outline: none;
border: 1px solid var(--vf-node-color, #1a192b);
}
.vue-flow__node-output {
--vf-handle: var(--vf-node-color, #ff0072);
--vf-box-shadow: var(--vf-node-color, #ff0072);
background: var(--vf-node-bg);
border-color: var(--vf-node-color, #ff0072);
}
.vue-flow__node-output.selected,
.vue-flow__node-output:focus,
.vue-flow__node-output:focus-visible {
outline: none;
border: 1px solid var(--vf-node-color, #ff0072);
}
.vue-flow__nodesselection-rect,
.vue-flow__selection {
background: rgba(0, 89, 220, 0.08);
border: 1px dotted rgba(0, 89, 220, 0.8);
}
.vue-flow__nodesselection-rect:focus,
.vue-flow__nodesselection-rect:focus-visible,
.vue-flow__selection:focus,
.vue-flow__selection:focus-visible {
outline: none;
}
.vue-flow__handle {
width: 6px;
height: 6px;
background: var(--vf-handle);
border: 1px solid #fff;
border-radius: 100%;
}
/* ⚠️ EVERY VUE FLOW PLUGIN SHIPS ITS OWN STYLESHEET, AND ONLY CORE'S WAS HERE.
`@vue-flow/node-resizer` was the one that mattered: its stylesheet is what
gives a resize control `position: absolute` and a 5px handle. Without it the
handles CnFlowNode renders have no size and no position, so a node that is
resizable looks exactly like a node that is not — the component was mounted
and the affordance was invisible.
The minimap's own sheet is small (a background colour and the grab cursors);
its geometry comes from `.vue-flow__panel` in core, which was already here.
Imported for the cursors, and before our own rules so the theme below still
wins. */
.vue-flow__resize-control {
position: absolute;
}
.vue-flow__resize-control.left,
.vue-flow__resize-control.right {
cursor: ew-resize;
}
.vue-flow__resize-control.top,
.vue-flow__resize-control.bottom {
cursor: ns-resize;
}
.vue-flow__resize-control.top.left,
.vue-flow__resize-control.bottom.right {
cursor: nwse-resize;
}
.vue-flow__resize-control.bottom.left,
.vue-flow__resize-control.top.right {
cursor: nesw-resize;
}
/* handle styles */
.vue-flow__resize-control.handle {
width: 5px;
height: 5px;
border: 1px solid #fff;
border-radius: 1px;
background-color: #3367d9;
transform: translate(-50%, -50%);
}
.vue-flow__resize-control.handle.left {
left: 0;
top: 50%;
}
.vue-flow__resize-control.handle.right {
left: 100%;
top: 50%;
}
.vue-flow__resize-control.handle.top {
left: 50%;
top: 0;
}
.vue-flow__resize-control.handle.bottom {
left: 50%;
top: 100%;
}
.vue-flow__resize-control.handle.top.left {
left: 0;
}
.vue-flow__resize-control.handle.bottom.left {
left: 0;
}
.vue-flow__resize-control.handle.top.right {
left: 100%;
}
.vue-flow__resize-control.handle.bottom.right {
left: 100%;
}
/* line styles */
.vue-flow__resize-control.line {
border-color: #3367d9;
border-width: 0;
border-style: solid;
}
.vue-flow__resize-control.line.left,
.vue-flow__resize-control.line.right {
width: 1px;
transform: translate(-50%, 0);
top: 0;
height: 100%;
}
.vue-flow__resize-control.line.left {
left: 0;
border-left-width: 1px;
}
.vue-flow__resize-control.line.right {
left: 100%;
border-right-width: 1px;
}
.vue-flow__resize-control.line.top,
.vue-flow__resize-control.line.bottom {
height: 1px;
transform: translate(0, -50%);
left: 0;
width: 100%;
}
.vue-flow__resize-control.line.top {
top: 0;
border-top-width: 1px;
}
.vue-flow__resize-control.line.bottom {
border-bottom-width: 1px;
top: 100%;
}
.vue-flow__minimap {
background-color: #fff;
}
.vue-flow__minimap.pannable {
cursor: grab;
}
.vue-flow__minimap.dragging {
cursor: grabbing;
}
.vue-flow__minimap-mask.pannable {
cursor: grab;
}
.cn-graph-canvas {
position: relative;
width: 100%;
height: 100%;
min-height: 320px;
}
/* THEME, NOT OVERRIDE. Every colour comes from a Nextcloud variable with a
fallback, so the canvas follows the user's theme — including dark — instead
of being the one component that ignores it. */
.cn-graph-canvas .vue-flow__background {
background: var(--color-main-background, #fff);
}
.cn-graph-canvas .vue-flow__edge-path {
stroke: var(--color-border-dark, #888);
}
.cn-graph-canvas .vue-flow__edge.selected .vue-flow__edge-path {
stroke: var(--color-primary-element, #0082c9);
}
.cn-graph-canvas__controls {
position: absolute;
bottom: 12px;
left: 12px;
display: flex;
flex-direction: column;
z-index: 5;
}
.cn-graph-canvas__control {
width: 28px;
height: 28px;
border: 1px solid var(--color-border, #d0d0d0);
background: var(--color-main-background, #fff);
color: var(--color-main-text, #222);
cursor: pointer;
}
.cn-graph-canvas__control:focus-visible {
outline: 2px solid var(--color-primary-element, #0082c9);
outline-offset: 1px;
}
.cn-graph-canvas .vue-flow__minimap {
background: var(--color-background-dark, #ededed);
}
.cn-flow-detail[data-v-65800ae2] {
position: relative;
block-size: 100%;
inline-size: 100%;
/* The dotted grid every flow tool draws: it says "canvas", and it makes
drag alignment visible without a snapping feature. */
background-image: radial-gradient(var(--color-border) 1px, transparent 1px);
background-size: 20px 20px;
}
/* The canvas paints an opaque main-background of its own, which sat exactly
on top of the grid above. Cleared here, for flow editors only — other
CnGraphCanvas consumers keep their solid ground. */
.cn-flow-detail[data-v-65800ae2] .cn-graph-canvas {
background: transparent;
}
.cn-flow-detail__toolbar[data-v-65800ae2] {
position: absolute;
inset-block-start: 12px;
inset-inline-end: 12px;
z-index: 10;
display: flex;
gap: 4px;
align-items: center;
padding: 4px;
border: 1px solid var(--color-border);
border-radius: var(--border-radius-large);
background: var(--color-main-background);
box-shadow: 0 1px 4px var(--color-box-shadow);
}
.cn-flow-detail__toolbar-group[data-v-65800ae2] {
display: flex;
align-items: center;
margin-inline-start: 4px;
padding-inline-start: 8px;
border-inline-start: 1px solid var(--color-border);
}
.cn-flow-detail__check[data-v-65800ae2] {
position: absolute;
inset-block-start: 64px;
inset-inline-end: 12px;
z-index: 10;
max-inline-size: 360px;
}
.cn-flow-detail__check-items[data-v-65800ae2] {
margin-block-start: 4px;
padding-inline-start: 20px;
list-style: disc;
}
.cn-flow-detail__defs[data-v-65800ae2] {
position: absolute;
inline-size: 0;
block-size: 0;
}
.cn-flow-detail__edge[data-v-65800ae2] {
stroke: var(--color-border-dark);
stroke-width: 2;
}
.cn-flow-detail__arrowhead[data-v-65800ae2] {
fill: var(--color-border-dark);
}
/* ONE container, not a card in a card: the canvas wrapper draws the box —
border, radius, background, selection — and this card only fills it. Its
earlier own border/background rendered as a visible nested box. */
.cn-flow-detail__node[data-v-65800ae2] {
display: flex;
flex-direction: column;
gap: 2px;
justify-content: center;
block-size: 100%;
padding: 8px 12px;
border-radius: inherit;
overflow: hidden;
}
/* Unknown step -> error border on the NODE WRAPPER, so the whole node reads as
wrong rather than just its body.
This targeted `.cn-graph-canvas__node` until the Vue Flow migration renamed
the wrapper to `.cn-flow-node`, and nothing caught it: a CSS rule whose
selector stops matching does not warn, it just silently stops painting. The
class kept appearing in the shipped stylesheet and source maps, so it read
as present while unknown nodes quietly lost their error border. */
.cn-flow-detail[data-v-65800ae2] .cn-flow-node:has(.cn-flow-detail__node--unknown) {
border-color: var(--color-error);
}
/* Role accents, keyed on the CATALOGUE's role — never on graph position,
which once painted unconnected steps green. Inset box-shadow rather than a
border so the accent adds no layout width. */
.cn-flow-detail__node--role-trigger[data-v-65800ae2] {
box-shadow: inset 4px 0 0 0 var(--color-success);
}
.cn-flow-detail__node--role-step[data-v-65800ae2] {
box-shadow: inset 4px 0 0 0 var(--color-primary-element);
}
.cn-flow-detail__node--role-end[data-v-65800ae2] {
box-shadow: inset 4px 0 0 0 var(--color-error);
}
.cn-flow-detail__node-type[data-v-65800ae2] {
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cn-flow-detail__node-label[data-v-65800ae2],
.cn-flow-detail__node-warning[data-v-65800ae2] {
font-size: 0.85em;
color: var(--color-text-maxcontrast);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cn-flow-detail__node-warning[data-v-65800ae2] {
color: var(--color-error-text);
}
.cn-flow-detail__empty[data-v-65800ae2] {
position: absolute;
inset: 0;
pointer-events: none;
}
.cn-flow-sidebar--embedded[data-v-3f15f48e] {
display: flex;
flex-direction: column;
gap: 20px;
padding: 8px 12px;
}
.cn-flow-sidebar__section[data-v-3f15f48e] {
display: flex;
flex-direction: column;
gap: 8px;
padding: 8px 0;
}
.cn-flow-sidebar__tabs[data-v-3f15f48e] {
display: flex;
gap: 4px;
border-block-end: 1px solid var(--color-border);
}
.cn-flow-sidebar__tab[data-v-3f15f48e] {
flex: 1 1 0;
padding: 8px 4px;
border: none;
border-block-end: 2px solid transparent;
background: none;
color: var(--color-text-maxcontrast);
font-weight: 600;
cursor: pointer;
}
.cn-flow-sidebar__tab[data-v-3f15f48e]:hover {
background: var(--color-background-hover);
}
.cn-flow-sidebar__tab--active[data-v-3f15f48e] {
color: var(--color-main-text);
border-block-end-color: var(--color-primary-element);
}
.cn-flow-sidebar__selected-name[data-v-3f15f48e] {
font-weight: 600;
}
.cn-flow-sidebar__selected-actions[data-v-3f15f48e] {
display: flex;
gap: 8px;
}
.cn-flow-sidebar__palette[data-v-3f15f48e] {
display: flex;
flex-direction: column;
gap: 4px;
}
.cn-flow-sidebar__palette-item[data-v-3f15f48e] {
display: flex;
flex-direction: column;
gap: 2px;
padding: 6px 8px;
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
cursor: grab;
}
.cn-flow-sidebar__palette-item[data-v-3f15f48e]:hover {
background: var(--color-background-hover);
}
.cn-flow-sidebar__palette-head[data-v-3f15f48e] {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
}
.cn-flow-sidebar__palette-name[data-v-3f15f48e] {
font-weight: 600;
}
.cn-flow-sidebar__palette-role[data-v-3f15f48e] {
font-size: 0.75em;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-text-maxcontrast);
}
.cn-flow-sidebar__palette-role--trigger[data-v-3f15f48e] {
color: var(--color-success-text);
}
.cn-flow-sidebar__palette-role--end[data-v-3f15f48e] {
color: var(--color-error-text);
}
.cn-flow-sidebar__palette-description[data-v-3f15f48e] {
font-size: 0.85em;
color: var(--color-text-maxcontrast);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.cn-flow-sidebar__palette-id[data-v-3f15f48e],
.cn-flow-sidebar__hint[data-v-3f15f48e] {
font-size: 0.85em;
color: var(--color-text-maxcontrast);
}
.cn-flow-sidebar__error[data-v-3f15f48e] {
color: var(--color-error-text);
}
.cn-flow-sidebar__run[data-v-3f15f48e] {
display: flex;
gap: 8px;
inline-size: 100%;
padding: 4px 6px;
border: none;
background: none;
text-align: start;
cursor: pointer;
}
.cn-flow-sidebar__run[data-v-3f15f48e]:hover {
background: var(--color-background-hover);
}
.cn-flow-sidebar__status--failed[data-v-3f15f48e] {
color: var(--color-error-text);
}
.cn-flow-sidebar__status--completed[data-v-3f15f48e] {
color: var(--color-success-text);
}
.cn-flow-modal[data-v-72417086] {
display: flex;
gap: 0;
block-size: 100%;
min-block-size: 60vh;
}
.cn-flow-modal__canvas[data-v-72417086] {
flex: 1 1 auto;
min-inline-size: 0;
}
.cn-flow-modal__side[data-v-72417086] {
flex: 0 0 340px;
max-inline-size: 340px;
overflow-y: auto;
border-inline-start: 1px solid var(--color-border);
}
@media (max-width: 900px) {
.cn-flow-modal[data-v-72417086] {
flex-direction: column;
}
.cn-flow-modal__side[data-v-72417086] {
flex: 1 1 auto;
max-inline-size: none;
border-inline-start: none;
border-block-start: 1px solid var(--color-border);
}
}
.cn-edit-setup[data-v-612d4d02] {
padding: 20px;
}
.cn-edit-setup__intro[data-v-612d4d02],
.cn-edit-setup__empty[data-v-612d4d02] {
color: var(--color-text-maxcontrast);
margin-bottom: 12px;
}
.cn-edit-setup__list[data-v-612d4d02] {
list-style: none;
padding: 0;
margin: 0;
}
.cn-edit-setup__step[data-v-612d4d02] {
border: 1px solid var(--color-border);
border-radius: var(--border-radius-large);
padding: 12px;
margin-bottom: 12px;
display: flex;
flex-direction: column;
gap: 8px;
}
.cn-edit-setup__row[data-v-612d4d02] {
display: flex;
align-items: flex-end;
gap: 8px;
}
.cn-edit-setup__type[data-v-612d4d02] {
display: flex;
flex-direction: column;
gap: 4px;
}
.cn-edit-walkthrough__intro[data-v-09d71a03],
.cn-edit-walkthrough__empty[data-v-09d71a03] {
color: var(--color-text-maxcontrast);
margin-bottom: 12px;
}
.cn-edit-walkthrough__field[data-v-09d71a03],
.cn-edit-walkthrough__trigger[data-v-09d71a03] {
display: block;
margin-bottom: 12px;
}
.cn-edit-walkthrough__trigger[data-v-09d71a03] {
display: flex;
flex-direction: column;
gap: 4px;
}
.cn-edit-walkthrough__steps-title[data-v-09d71a03] {
margin-bottom: 8px;
}
.cn-edit-walkthrough__list[data-v-09d71a03] {
list-style: none;
padding: 0;
margin: 0;
}
.cn-edit-walkthrough__step[data-v-09d71a03] {
border: 1px solid var(--color-border);
border-radius: var(--border-radius-large);
padding: 12px;
margin-bottom: 12px;
display: flex;
flex-direction: column;
gap: 8px;
}
.cn-edit-walkthrough__row[data-v-09d71a03] {
display: flex;
align-items: flex-end;
gap: 8px;
}
.cn-edit-support__intro[data-v-f2468520] {
color: var(--color-text-maxcontrast);
margin-bottom: 12px;
}
.cn-edit-support__section[data-v-f2468520] {
margin-bottom: 8px;
}
.cn-edit-support__field[data-v-f2468520] {
display: block;
margin-bottom: 12px;
}
.cn-edit-support__list[data-v-f2468520] {
list-style: none;
padding: 0;
margin: 0;
}
.cn-edit-support__button[data-v-f2468520] {
border: 1px solid var(--color-border);
border-radius: var(--border-radius-large);
padding: 12px;
margin-bottom: 12px;
display: flex;
flex-direction: column;
gap: 8px;
}
.cn-edit-support__button-name[data-v-f2468520] {
margin: 0;
}
.cn-edit-support__avatar[data-v-f2468520] {
display: flex;
gap: 12px;
align-items: flex-start;
margin-bottom: 12px;
}
.cn-edit-support__avatar-preview[data-v-f2468520] {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
flex: 0 0 auto;
}
.cn-edit-support__avatar-fields[data-v-f2468520] {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 8px;
}
.cn-edit-support__avatar-actions[data-v-f2468520] {
display: flex;
gap: 8px;
align-items: center;
}
.cn-edit-support__avatar-input[data-v-f2468520] {
display: none;
}
.cn-edit-support__style[data-v-f2468520] {
display: flex;
flex-direction: column;
gap: 4px;
}
.cn-buildiq-edit[data-v-2dbff71f] {
display: inline-flex;
}
/* Conduction-orange accent on the trigger (ADR-041 brand exception). Targets the
NcActions trigger button — `.button-vue` in current @nextcloud/vue (icon-only
mode renders no `.action-item__menutoggle`), with the legacy class kept too.
`!important` beats the `button-vue--tertiary` transparent default. */
.cn-buildiq-edit__actions[data-v-2dbff71f] .button-vue,
.cn-buildiq-edit__actions[data-v-2dbff71f] .action-item__menutoggle {
background-color: var(--c-orange-knvb, #f36c21) !important;
color: #fff !important;
border-radius: var(--border-radius-element, var(--border-radius-large, 8px));
}
/* Center the glyph in the icon-only trigger (button-vue__icon is display:block
by default, which left-aligns the 20×20 svg). */
.cn-buildiq-edit__actions[data-v-2dbff71f] .button-vue__wrapper {
justify-content: center;
}
.cn-buildiq-edit__actions[data-v-2dbff71f] .button-vue__icon {
display: flex !important;
align-items: center;
justify-content: center;
color: #fff;
}
.cn-buildiq-edit__glyph[data-v-2dbff71f] {
color: #fff;
display: block;
margin: auto;
}
.cn-advanced-form-dialog__value-input-container[data-v-1884662d] {
width: 100%;
min-width: 0;
}
.cn-advanced-form-dialog__value-input-container[data-v-1884662d] .text-field {
margin: 0;
padding: 0;
}
.cn-advanced-form-dialog__boolean-input-row[data-v-1884662d] {
display: flex;
align-items: center;
gap: 6px;
}
.cn-advanced-form-dialog__array-input-row[data-v-1884662d] {
display: flex;
align-items: center;
gap: 6px;
}
.cn-advanced-form-dialog__array-input-row[data-v-1884662d] > :first-child {
flex: 1;
}
/* patch extreme size in field */
.cn-advanced-form-dialog__boolean-input-row__input > span[data-v-1884662d] {
padding-left: 0;
padding-block: 0;
}
.cn-advanced-form-dialog__boolean-input-row__input > input[data-v-1884662d] {
margin: 0;
}
.cn-advanced-form-dialog__info-icon[data-v-1884662d] {
flex-shrink: 0;
color: var(--color-text-maxcontrast);
cursor: help;
}
.cn-advanced-form-dialog__json-value[data-v-1884662d] {
max-height: 200px;
overflow-y: auto;
white-space: pre-wrap;
font-family: monospace;
font-size: 12px;
background: var(--color-background-dark);
padding: 8px;
border-radius: 4px;
margin: 0;
}
/* Textarea: keep it inside the table cell instead of overflowing.
NcTextArea's wrapper has a fixed height (`calc(var(--default-clickable-area) * 2)`)
that ignores the `rows` attribute, which causes the textarea to render with a
too-small viewport. Let the wrapper grow with its content instead. */
.cn-advanced-form-dialog__textarea[data-v-1884662d] {
width: 100%;
box-sizing: border-box;
}
.cn-advanced-form-dialog__textarea[data-v-1884662d] .textarea__main-wrapper {
height: auto;
min-height: var(--default-clickable-area);
}
.cn-advanced-form-dialog__textarea[data-v-1884662d] textarea {
width: 100%;
max-width: 100%;
box-sizing: border-box;
resize: vertical;
min-height: 80px;
max-height: 240px;
display: block;
}
/* Color widget: clickable swatch (native picker) + visible text input */
.cn-advanced-form-dialog__color-input-row[data-v-1884662d] {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
}
.cn-advanced-form-dialog__color-input-row[data-v-1884662d] > :last-child {
flex: 1;
min-width: 0;
}
.cn-advanced-form-dialog__color-swatch[data-v-1884662d] {
--cn-color-swatch-checker:
linear-gradient(45deg, var(--color-background-dark) 25%, transparent 25%),
linear-gradient(-45deg, var(--color-background-dark) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, var(--color-background-dark) 75%),
linear-gradient(-45deg, transparent 75%, var(--color-background-dark) 75%);
display: inline-block;
width: 32px;
height: 32px;
flex-shrink: 0;
padding: 0;
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
cursor: pointer;
background-image: var(--cn-color-swatch-checker);
background-size: 8px 8px;
background-position: 0 0, 0 4px, 4px -4px, -4px 0;
overflow: hidden;
position: relative;
}
.cn-advanced-form-dialog__color-swatch[data-v-1884662d]:focus-visible {
outline: 2px solid var(--color-primary-element);
outline-offset: 2px;
}
.cn-advanced-form-dialog__color-swatch--readonly[data-v-1884662d] {
cursor: default;
width: 20px;
height: 20px;
vertical-align: middle;
margin-inline-end: 6px;
}
.cn-advanced-form-dialog__color-display[data-v-1884662d] {
display: inline-flex;
align-items: center;
}
/* Help text & inline validation under the input */
.cn-advanced-form-dialog__field-help[data-v-1884662d] {
display: flex;
flex-direction: column;
gap: 2px;
margin-top: 4px;
font-size: 0.85em;
color: var(--color-text-maxcontrast);
}
.cn-advanced-form-dialog__field-example[data-v-1884662d] {
font-style: italic;
}
.cn-advanced-form-dialog__field-error[data-v-1884662d] {
margin-top: 4px;
font-size: 0.85em;
color: var(--color-error-text);
}
.cn-advanced-form-dialog__value-cell-wrapper[data-v-1884662d] {
display: flex;
flex-direction: column;
width: 100%;
}
/* Object-array widget: chip list + add button */
.cn-advanced-form-dialog__object-array[data-v-1884662d] {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
}
.cn-advanced-form-dialog__object-array-chips[data-v-1884662d] {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.cn-advanced-form-dialog__object-array-chip[data-v-1884662d] {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 4px 2px 10px;
background: var(--color-background-dark);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-pill, 14px);
color: var(--color-main-text);
cursor: pointer;
font: inherit;
max-width: 240px;
}
.cn-advanced-form-dialog__object-array-chip[data-v-1884662d]:hover {
background: var(--color-background-hover);
}
.cn-advanced-form-dialog__object-array-chip-label[data-v-1884662d] {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cn-advanced-form-dialog__object-array-chip-remove[data-v-1884662d] {
flex-shrink: 0;
}
.cn-advanced-form-dialog__object-array-add[data-v-1884662d] {
align-self: flex-start;
}
.cn-advanced-form-dialog__table-container[data-v-1e6f50f1] {
background: var(--color-main-background);
border-radius: var(--border-radius);
box-shadow: 0 2px 4px var(--color-box-shadow);
border: 1px solid var(--color-border);
margin-bottom: calc(5 * var(--default-grid-baseline));
}
.cn-advanced-form-dialog__table[data-v-1e6f50f1] {
width: 100%;
border-collapse: collapse;
background-color: var(--color-main-background);
}
.cn-advanced-form-dialog__table th[data-v-1e6f50f1],
.cn-advanced-form-dialog__table td[data-v-1e6f50f1] {
padding: calc(3 * var(--default-grid-baseline));
text-align: left;
border-bottom: 1px solid var(--color-border);
vertical-align: middle;
}
/* Selected (editing) row: align the constrained label cell to the top of the
value cell so tall inputs (textarea, JSON editor) do not visually overflow
into the next row. */
.cn-advanced-form-dialog__table-row--selected td[data-v-1e6f50f1] {
vertical-align: top;
}
.cn-advanced-form-dialog__table th[data-v-1e6f50f1] {
background: var(--color-background-dark);
font-weight: 500;
color: var(--color-text-maxcontrast);
}
.cn-advanced-form-dialog__table-row[data-v-1e6f50f1] {
cursor: pointer;
transition: background-color 0.2s ease;
background-color: var(--color-main-background);
}
.cn-advanced-form-dialog__table-row[data-v-1e6f50f1]:hover {
background-color: var(--color-background-hover);
}
/* Active/selected row: light blue; ensure it wins over validation state classes */
.cn-advanced-form-dialog__table-row.cn-advanced-form-dialog__table-row--selected[data-v-1e6f50f1],
.cn-advanced-form-dialog__table-row--selected[data-v-1e6f50f1]:hover {
background-color: var(--color-primary-light);
box-shadow: inset 3px 0 0 0 var(--color-primary);
}
.cn-advanced-form-dialog__table-row--non-editable[data-v-1e6f50f1] {
background-color: var(--color-background-dark);
cursor: not-allowed;
opacity: 0.7;
}
.cn-advanced-form-dialog__table-row--non-editable[data-v-1e6f50f1] * {
cursor: not-allowed !important;
}
.cn-advanced-form-dialog__table-row--invalid[data-v-1e6f50f1] {
background-color: var(--color-error-light);
}
.cn-advanced-form-dialog__table-row--warning[data-v-1e6f50f1] {
background-color: var(--color-warning-light);
}
.cn-advanced-form-dialog__table-col-constrained[data-v-1e6f50f1] {
width: 150px;
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cn-advanced-form-dialog__table-col-expanded[data-v-1e6f50f1] {
width: auto;
min-width: 200px;
}
.cn-advanced-form-dialog__table-col-actions[data-v-1e6f50f1] {
width: 56px;
text-align: right;
white-space: nowrap;
}
.cn-advanced-form-dialog__prop-cell[data-v-1e6f50f1] {
width: 30%;
font-weight: 600;
}
.cn-advanced-form-dialog__value-cell[data-v-1e6f50f1] {
width: 70%;
word-break: break-word;
border-radius: 4px;
}
.cn-advanced-form-dialog__value-cell[data-v-1e6f50f1] > * {
max-width: 100%;
}
.cn-advanced-form-dialog__prop-cell-content[data-v-1e6f50f1] {
display: flex;
align-items: center;
gap: 8px;
}
.cn-advanced-form-dialog__validation-icon[data-v-1e6f50f1] {
flex-shrink: 0;
}
.cn-advanced-form-dialog__validation-icon--error[data-v-1e6f50f1] {
color: var(--color-error);
}
.cn-advanced-form-dialog__validation-icon--edited[data-v-1e6f50f1] {
color: var(--color-primary-element);
}
.cn-advanced-form-dialog__validation-icon--warning[data-v-1e6f50f1] {
color: var(--color-warning);
}
.cn-advanced-form-dialog__validation-icon--lock[data-v-1e6f50f1] {
color: var(--color-text-lighter);
}
.cn-advanced-form-dialog__validation-icon--new[data-v-1e6f50f1] {
color: var(--color-new);
}
.cn-advanced-form-dialog__required-indicator[data-v-1e6f50f1] {
color: var(--color-error-text);
font-weight: bold;
cursor: help;
}
.cn-advanced-form-dialog__immutable-badge[data-v-1e6f50f1] {
display: inline-block;
padding: 1px 6px;
border-radius: 10px;
background: var(--color-background-dark);
color: var(--color-text-maxcontrast);
font-size: 0.75em;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.02em;
cursor: help;
white-space: nowrap;
}
.cn-advanced-form-dialog__unsaved-note[data-v-1e6f50f1] {
margin-bottom: calc(3 * var(--default-grid-baseline));
}
.cn-advanced-form-dialog__table-container[data-v-fcc3fd96] {
background: var(--color-main-background);
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: 0 2px 4px var(--color-box-shadow);
border: 1px solid var(--color-border);
margin-bottom: calc(5 * var(--default-grid-baseline));
}
.cn-advanced-form-dialog__table[data-v-fcc3fd96] {
width: 100%;
border-collapse: collapse;
background-color: var(--color-main-background);
}
.cn-advanced-form-dialog__table th[data-v-fcc3fd96],
.cn-advanced-form-dialog__table td[data-v-fcc3fd96] {
padding: calc(3 * var(--default-grid-baseline));
text-align: left;
border-bottom: 1px solid var(--color-border);
vertical-align: middle;
}
.cn-advanced-form-dialog__table th[data-v-fcc3fd96] {
background: var(--color-background-dark);
font-weight: 500;
color: var(--color-text-maxcontrast);
}
.cn-advanced-form-dialog__table-row[data-v-fcc3fd96] {
cursor: default;
background-color: var(--color-main-background);
}
.cn-advanced-form-dialog__table-col-constrained[data-v-fcc3fd96] {
width: 150px;
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cn-advanced-form-dialog__table-col-expanded[data-v-fcc3fd96] {
width: auto;
min-width: 200px;
}
.cn-advanced-form-dialog__json-editor[data-v-733de04c] {
display: flex;
flex-direction: column;
gap: 8px;
}
.cn-advanced-form-dialog__codemirror-container[data-v-733de04c] {
margin-top: 6px;
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
position: relative;
}
.cn-advanced-form-dialog__codemirror-container[data-v-733de04c] .cm-editor {
height: 100%;
outline: none !important;
}
.cn-advanced-form-dialog__codemirror-container[data-v-733de04c] .cm-scroller {
overflow: auto;
}
.cn-advanced-form-dialog__codemirror-container[data-v-733de04c] .cm-content {
border-radius: 0 !important;
border: none !important;
}
.cn-advanced-form-dialog__codemirror-container--light > .vue-codemirror[data-v-733de04c] {
border: 1px dotted silver;
}
.cn-advanced-form-dialog__codemirror-container--dark > .vue-codemirror[data-v-733de04c] {
border: 1px dotted grey;
}
/* value text color */
/* string */
.cn-advanced-form-dialog__codemirror-container--light[data-v-733de04c] .ͼe {
color: #448c27;
}
.cn-advanced-form-dialog__codemirror-container--dark[data-v-733de04c] .ͼe {
color: #88c379;
}
/* boolean */
.cn-advanced-form-dialog__codemirror-container--light[data-v-733de04c] .ͼc {
color: #221199;
}
.cn-advanced-form-dialog__codemirror-container--dark[data-v-733de04c] .ͼc {
color: #8d64f7;
}
/* null */
.cn-advanced-form-dialog__codemirror-container--light[data-v-733de04c] .ͼb {
color: #770088;
}
.cn-advanced-form-dialog__codemirror-container--dark[data-v-733de04c] .ͼb {
color: #be55cd;
}
/* number */
.cn-advanced-form-dialog__codemirror-container--light[data-v-733de04c] .ͼd {
color: #d19a66;
}
.cn-advanced-form-dialog__codemirror-container--dark[data-v-733de04c] .ͼd {
color: #9d6c3a;
}
/* text cursor */
.cn-advanced-form-dialog__codemirror-container[data-v-733de04c] .cm-content * {
cursor: text !important;
}
/* selection color */
.cn-advanced-form-dialog__codemirror-container--light[data-v-733de04c] .cm-line::selection,
.cn-advanced-form-dialog__codemirror-container--light[data-v-733de04c] .cm-line ::selection {
background-color: #d7eaff !important;
color: black;
}
.cn-advanced-form-dialog__codemirror-container--dark[data-v-733de04c] .cm-line::selection,
.cn-advanced-form-dialog__codemirror-container--dark[data-v-733de04c] .cm-line ::selection {
background-color: #8fb3e6 !important;
color: black;
}
/* string selection */
.cn-advanced-form-dialog__codemirror-container--light[data-v-733de04c] .cm-line .ͼe::selection {
color: #2d770f;
}
.cn-advanced-form-dialog__codemirror-container--dark[data-v-733de04c] .cm-line .ͼe::selection {
color: #104e0c;
}
/* boolean selection */
.cn-advanced-form-dialog__codemirror-container--light[data-v-733de04c] .cm-line .ͼc::selection {
color: #221199;
}
.cn-advanced-form-dialog__codemirror-container--dark[data-v-733de04c] .cm-line .ͼc::selection {
color: #4026af;
}
/* null selection */
.cn-advanced-form-dialog__codemirror-container--light[data-v-733de04c] .cm-line .ͼb::selection {
color: #770088;
}
.cn-advanced-form-dialog__codemirror-container--dark[data-v-733de04c] .cm-line .ͼb::selection {
color: #770088;
}
/* number selection */
.cn-advanced-form-dialog__codemirror-container--light[data-v-733de04c] .cm-line .ͼd::selection {
color: #8c5c2c;
}
.cn-advanced-form-dialog__codemirror-container--dark[data-v-733de04c] .cm-line .ͼd::selection {
color: #623907;
}
.cn-advanced-form-dialog__format-btn[data-v-733de04c] {
margin-top: 8px;
}
.cn-advanced-form-dialog__json-error[data-v-733de04c] {
color: var(--color-error);
font-size: 14px;
}
.cn-advanced-form-dialog__form[data-v-aef2a622] {
display: flex;
flex-direction: column;
gap: 8px;
}
.cn-advanced-form-dialog__tabs[data-v-aef2a622] {
display: flex;
flex-direction: column;
gap: 12px;
}
/* Bootstrap-Vue tab styling to match ViewObject */
.tabContainer[data-v-aef2a622] {
margin-top: 20px;
}
.tabContainer > * ul > li[data-v-aef2a622] {
display: flex;
flex: 1;
}
.tabContainer > * ul > li[data-v-aef2a622]:hover {
background-color: var(--color-background-hover);
}
.tabContainer > * ul > li > a[data-v-aef2a622] {
flex: 1;
text-align: center;
}
.tabContainer > * ul > li > .active[data-v-aef2a622] {
background: transparent !important;
color: var(--color-main-text) !important;
border-bottom: var(--default-grid-baseline) solid var(--color-primary-element) !important;
}
.tabContainer > * ul[role="tablist"][data-v-aef2a622] {
display: flex;
margin: 10px 8px 0 8px;
justify-content: space-between;
border-bottom: 1px solid var(--color-border);
}
.tabContainer > * ul[role="tablist"] > * a[role="tab"][data-v-aef2a622] {
padding-inline-start: 10px;
padding-inline-end: 10px;
padding-block-start: 10px;
padding-block-end: 10px;
}
.tabContainer > * div[role="tabpanel"][data-v-aef2a622] {
margin-block-start: var(--OR-margin-10);
}
[data-v-aef2a622] .nav-tabs {
border-bottom: 1px solid var(--color-border);
margin-bottom: 15px;
display: flex;
}
[data-v-aef2a622] .nav-tabs .nav-item {
display: flex;
flex: 1;
}
[data-v-aef2a622] .nav-tabs .nav-link {
flex: 1;
text-align: center;
border: none;
border-bottom: 2px solid transparent;
color: var(--color-text-maxcontrast);
padding: 8px 16px;
}
[data-v-aef2a622] .nav-tabs .nav-link.active {
color: var(--color-main-text);
border-bottom: 2px solid var(--color-primary);
background-color: transparent;
}
[data-v-aef2a622] .nav-tabs .nav-link:hover {
border-bottom: 2px solid var(--color-border);
}
[data-v-aef2a622] .tab-content {
padding: 16px;
background-color: var(--color-main-background);
}
/* Hand-rolled tab nav — replaces bootstrap-vue's BTabs/BTab. */
.cn-advanced-form-dialog__tab-nav[data-v-aef2a622] {
display: flex;
gap: 0;
list-style: none;
padding: 0;
margin: 0 0 16px;
border-bottom: 1px solid var(--color-border);
}
.cn-advanced-form-dialog__tab-nav-item[data-v-aef2a622] {
flex: 1 1 0;
}
.cn-advanced-form-dialog__tab-button[data-v-aef2a622] {
width: 100%;
padding: 10px 14px;
background: transparent;
border: 0;
border-bottom: 2px solid transparent;
color: var(--color-text-maxcontrast);
font: inherit;
cursor: pointer;
}
.cn-advanced-form-dialog__tab-button[data-v-aef2a622]:hover:not(:disabled) {
border-bottom-color: var(--color-border);
color: var(--color-main-text);
}
.cn-advanced-form-dialog__tab-button.is-active[data-v-aef2a622] {
color: var(--color-main-text);
border-bottom-color: var(--color-primary);
}
/* stylelint-disable-next-line no-descending-specificity */
.cn-advanced-form-dialog__tab-button[data-v-aef2a622]:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.cn-advanced-form-dialog__tab-content[data-v-aef2a622] {
padding: 16px 0;
}
.cn-copy__pattern[data-v-00f97162] {
margin-bottom: 16px;
}
.cn-copy__pattern label[data-v-00f97162] {
display: block;
font-weight: 600;
margin-bottom: 4px;
}
.cn-copy__preview[data-v-00f97162] {
margin-top: 12px;
}
.cn-copy__preview-row[data-v-00f97162] {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background-color: var(--color-background-hover);
border-radius: var(--border-radius);
}
.cn-copy__preview-original[data-v-00f97162] {
color: var(--color-text-maxcontrast);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cn-copy__preview-arrow[data-v-00f97162] {
flex-shrink: 0;
color: var(--color-text-maxcontrast);
}
.cn-copy__preview-new[data-v-00f97162] {
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cn-delete__confirm[data-v-306eeacf] {
padding: 4px 0;
}
.cn-mass-copy__pattern[data-v-35e54e4f] {
margin-bottom: 16px;
}
.cn-mass-copy__pattern label[data-v-35e54e4f] {
display: block;
font-weight: 600;
margin-bottom: 4px;
}
.cn-mass-copy__list[data-v-35e54e4f] {
max-height: 300px;
overflow-y: auto;
}
.cn-mass-copy__item[data-v-35e54e4f] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
border-bottom: 1px solid var(--color-border);
}
.cn-mass-copy__item[data-v-35e54e4f]:last-child {
border-bottom: none;
}
.cn-mass-copy__item-names[data-v-35e54e4f] {
display: flex;
align-items: center;
gap: 8px;
overflow: hidden;
flex: 1;
}
.cn-mass-copy__item-original[data-v-35e54e4f] {
color: var(--color-text-maxcontrast);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cn-mass-copy__item-arrow[data-v-35e54e4f] {
flex-shrink: 0;
color: var(--color-text-maxcontrast);
}
.cn-mass-copy__item-new[data-v-35e54e4f] {
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cn-mass-copy__empty[data-v-35e54e4f] {
text-align: center;
color: var(--color-text-maxcontrast);
font-style: italic;
padding: 20px;
}
.cn-mass-delete__list[data-v-bac41c62] {
max-height: 300px;
overflow-y: auto;
margin-top: 12px;
}
.cn-mass-delete__item[data-v-bac41c62] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
border-bottom: 1px solid var(--color-border);
}
.cn-mass-delete__item[data-v-bac41c62]:last-child {
border-bottom: none;
}
.cn-mass-delete__item-name[data-v-bac41c62] {
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cn-mass-delete__empty[data-v-bac41c62] {
text-align: center;
color: var(--color-text-maxcontrast);
font-style: italic;
padding: 20px;
}
.cn-mass-export__description[data-v-6858f9a2] {
margin-bottom: 16px;
color: var(--color-text-maxcontrast);
}
.cn-mass-export__field[data-v-6858f9a2] {
display: flex;
flex-direction: column;
gap: 4px;
}
.cn-mass-export__field label[data-v-6858f9a2] {
font-weight: 600;
}
.cn-mass-import__form[data-v-70b2fb8f] {
display: flex;
flex-direction: column;
gap: 16px;
}
.cn-mass-import__file-row[data-v-70b2fb8f] {
display: flex;
align-items: center;
gap: 12px;
}
.cn-mass-import__file-info[data-v-70b2fb8f] {
display: flex;
align-items: center;
gap: 6px;
}
.cn-mass-import__file-name[data-v-70b2fb8f] {
font-weight: 500;
}
.cn-mass-import__file-size[data-v-70b2fb8f] {
color: var(--color-text-maxcontrast);
font-size: 0.9em;
}
.cn-mass-import__help[data-v-70b2fb8f] {
padding: 12px;
background: var(--color-background-hover);
border-radius: var(--border-radius);
}
.cn-mass-import__help p[data-v-70b2fb8f] {
margin: 0 0 8px;
}
.cn-mass-import__help ul[data-v-70b2fb8f] {
margin: 0;
padding-left: 20px;
}
.cn-mass-import__options[data-v-70b2fb8f] {
display: flex;
flex-direction: column;
gap: 12px;
}
/* Summary table */
.cn-mass-import__results h3[data-v-70b2fb8f] {
margin: 0 0 12px;
font-size: 1.1rem;
}
.cn-mass-import__summary-table[data-v-70b2fb8f] {
width: 100%;
border-collapse: collapse;
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.cn-mass-import__summary-table th[data-v-70b2fb8f],
.cn-mass-import__summary-table td[data-v-70b2fb8f] {
padding: 8px 12px;
text-align: left;
border-bottom: 1px solid var(--color-border);
}
.cn-mass-import__summary-table th[data-v-70b2fb8f] {
background: var(--color-background-dark);
font-weight: 600;
font-size: 0.85rem;
text-transform: uppercase;
}
.cn-mass-import__sheet-name[data-v-70b2fb8f] {
font-weight: 600;
}
.cn-mass-import__stat[data-v-70b2fb8f] {
text-align: center;
font-weight: 600;
}
.cn-mass-import__stat--found[data-v-70b2fb8f] { color: var(--color-primary-element);
}
.cn-mass-import__stat--created[data-v-70b2fb8f] { color: var(--color-success);
}
.cn-mass-import__stat--updated[data-v-70b2fb8f] { color: var(--color-warning);
}
.cn-mass-import__stat--unchanged[data-v-70b2fb8f] { color: var(--color-text-maxcontrast);
}
.cn-mass-import__stat--errors[data-v-70b2fb8f] { color: var(--color-error);
}
.cn-mass-import__expand[data-v-70b2fb8f] {
background: none;
border: none;
cursor: pointer;
padding: 2px;
border-radius: var(--border-radius-small, 4px);
color: var(--color-error);
transition: transform 0.2s ease;
vertical-align: middle;
margin-left: 4px;
}
.cn-mass-import__expand[data-v-70b2fb8f]:hover {
background: var(--color-background-hover);
}
.cn-mass-import__expand--open[data-v-70b2fb8f] {
transform: rotate(180deg);
}
/* Error details */
.cn-mass-import__error-row td[data-v-70b2fb8f] {
padding: 8px 12px;
background: var(--color-background-hover);
}
.cn-mass-import__error-table[data-v-70b2fb8f] {
width: 100%;
border-collapse: collapse;
font-size: 0.9em;
}
.cn-mass-import__error-table th[data-v-70b2fb8f],
.cn-mass-import__error-table td[data-v-70b2fb8f] {
padding: 6px 10px;
text-align: left;
border-bottom: 1px solid var(--color-border);
}
.cn-mass-import__error-table th[data-v-70b2fb8f] {
background: var(--color-background-dark);
font-weight: 600;
font-size: 0.85rem;
}
.cn-quick-filter-bar[data-v-8e121822] {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 8px 12px;
border-bottom: 1px solid var(--color-border);
background: var(--color-main-background);
}
/* Inline variant — bare strip for embedding inside another bar (e.g. the
CnActionsBar #filters slot), so it reads as a control beside the view toggle
rather than a separate bordered row. */
.cn-quick-filter-bar--inline[data-v-8e121822] {
padding: 0;
border-bottom: none;
background: transparent;
}
/* Dropdown variant — give the NcSelect a sensible minimum so multi-select
chips have room without stretching the whole bar. */
.cn-quick-filter-bar--dropdown[data-v-8e121822] {
align-items: center;
}
.cn-quick-filter-bar__select[data-v-8e121822] {
min-width: 220px;
}
.cn-quick-filter-bar__tab[data-v-8e121822] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
border: 1px solid var(--color-border);
border-radius: var(--border-radius-pill, 999px);
background: transparent;
color: var(--color-main-text);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background-color 120ms, color 120ms, border-color 120ms;
}
.cn-quick-filter-bar__tab[data-v-8e121822]:hover,
.cn-quick-filter-bar__tab[data-v-8e121822]:focus-visible {
background: var(--color-background-hover);
outline: none;
}
.cn-quick-filter-bar__tab--active[data-v-8e121822] {
background: var(--color-primary-element, var(--color-primary, #4376fc));
color: var(--color-primary-element-text, #fff);
border-color: var(--color-primary-element, var(--color-primary, #4376fc));
}
.cn-quick-filter-bar__icon[data-v-8e121822] {
display: inline-flex;
}
.cn-quick-filter-bar__label[data-v-8e121822] {
line-height: 1;
}
.cn-save-view[data-v-e9be4122] {
display: flex;
flex-direction: column;
gap: 12px;
padding-block: 8px;
}
.cn-form-builder[data-v-33e3f229] {
display: flex;
flex-direction: column;
gap: 12px;
}
.cn-form-builder__title[data-v-33e3f229] {
margin: 0;
font-size: 1.1em;
}
.cn-form-builder__description[data-v-33e3f229] {
margin: 4px 0 0;
color: var(--color-text-maxcontrast);
}
.cn-form-builder__body[data-v-33e3f229] {
display: grid;
grid-template-columns: 180px 1fr 1fr;
gap: 12px;
min-height: 320px;
}
.cn-form-builder__palette[data-v-33e3f229],
.cn-form-builder__fields[data-v-33e3f229],
.cn-form-builder__editor[data-v-33e3f229] {
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
padding: 8px;
background: var(--color-main-background);
display: flex;
flex-direction: column;
gap: 8px;
}
.cn-form-builder__palette-title[data-v-33e3f229],
.cn-form-builder__fields-title[data-v-33e3f229],
.cn-form-builder__editor-title[data-v-33e3f229] {
margin: 0;
font-size: 0.95em;
border-bottom: 1px solid var(--color-border);
padding-bottom: 4px;
}
.cn-form-builder__palette-list[data-v-33e3f229] {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 4px;
}
.cn-form-builder__palette-item[data-v-33e3f229] {
padding: 6px 8px;
border: 1px dashed var(--color-border);
border-radius: var(--border-radius);
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
font-size: 0.9em;
}
.cn-form-builder__palette-item[data-v-33e3f229]:hover {
background: var(--color-background-hover);
border-color: var(--color-primary-element);
}
.cn-form-builder__palette-icon[data-v-33e3f229] {
font-family: monospace;
font-weight: 600;
color: var(--color-primary-element);
}
.cn-form-builder__empty[data-v-33e3f229] {
color: var(--color-text-maxcontrast);
font-style: italic;
margin: 8px 0;
}
.cn-form-builder__fields-list[data-v-33e3f229] {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 2px;
}
.cn-form-builder__field-row[data-v-33e3f229] {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
padding: 6px 8px;
border-radius: var(--border-radius);
background: var(--color-background-hover);
cursor: pointer;
}
.cn-form-builder__field-row[data-v-33e3f229]:hover {
background: var(--color-background-darker, var(--color-background-hover));
}
.cn-form-builder__field-row--selected[data-v-33e3f229] {
background: var(--color-primary-element-light);
}
.cn-form-builder__field-meta[data-v-33e3f229] {
display: flex;
flex-direction: column;
min-width: 0;
}
.cn-form-builder__field-key[data-v-33e3f229] {
font-weight: 500;
font-family: monospace;
}
.cn-form-builder__field-type[data-v-33e3f229] {
color: var(--color-text-maxcontrast);
}
.cn-form-builder__field-actions[data-v-33e3f229] {
display: flex;
gap: 2px;
}
.cn-form-builder__action[data-v-33e3f229] {
background: none;
border: 1px solid var(--color-border);
padding: 2px 6px;
border-radius: var(--border-radius);
cursor: pointer;
font-size: 0.85em;
}
.cn-form-builder__action--delete[data-v-33e3f229] {
color: var(--color-error);
}
.cn-form-builder__action[data-v-33e3f229]:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.cn-form-builder__editor-row[data-v-33e3f229] {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 0.9em;
}
.cn-form-builder__editor-row--inline[data-v-33e3f229] {
flex-direction: row;
align-items: center;
gap: 8px;
}
.cn-form-builder__editor-row input[type="text"][data-v-33e3f229],
.cn-form-builder__editor-row select[data-v-33e3f229],
.cn-form-builder__editor-row textarea[data-v-33e3f229] {
padding: 4px 8px;
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
background: var(--color-main-background);
font-size: 1em;
}
.cn-form-builder__preview[data-v-33e3f229] {
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
padding: 8px;
background: var(--color-background-hover);
}
.cn-form-builder__preview summary[data-v-33e3f229] {
cursor: pointer;
font-weight: 500;
}
.cn-form-builder__preview-json[data-v-33e3f229] {
margin: 8px 0 0;
font-size: 0.85em;
max-height: 240px;
overflow: auto;
}
.cn-kpi-grid[data-v-e31696e2] {
display: grid;
gap: 16px;
margin-bottom: 24px;
}
.cn-kpi-grid--cols-2[data-v-e31696e2] {
grid-template-columns: repeat(2, 1fr);
}
.cn-kpi-grid--cols-3[data-v-e31696e2] {
grid-template-columns: repeat(3, 1fr);
}
.cn-kpi-grid--cols-4[data-v-e31696e2] {
grid-template-columns: repeat(4, 1fr);
}
/* Responsive breakpoints */
@media (max-width: 1200px) {
.cn-kpi-grid--cols-4[data-v-e31696e2] {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 900px) {
.cn-kpi-grid--cols-3[data-v-e31696e2] {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.cn-kpi-grid--cols-2[data-v-e31696e2],
.cn-kpi-grid--cols-3[data-v-e31696e2],
.cn-kpi-grid--cols-4[data-v-e31696e2] {
grid-template-columns: 1fr;
}
}
.cn-export-wizard__description[data-v-59983562] {
color: var(--color-text-maxcontrast);
margin-bottom: 12px;
}
.cn-export-wizard__field[data-v-59983562] {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 12px;
}
.cn-export-wizard__field--row[data-v-59983562] {
flex-direction: row;
gap: 12px;
}
.cn-export-wizard__field--row > div[data-v-59983562] {
flex: 1 1 50%;
display: flex;
flex-direction: column;
gap: 6px;
}
.cn-export-wizard__input[data-v-59983562],
.cn-export-wizard__date[data-v-59983562] {
width: 100%;
padding: 6px 10px;
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
background: var(--color-main-background);
}
.cn-export-wizard__input--inline[data-v-59983562] {
margin-top: 8px;
}
.cn-export-wizard__result[data-v-59983562] {
display: flex;
flex-direction: column;
gap: 8px;
}
.cn-walkthrough[data-v-5691d49a] {
position: fixed;
inset: 0;
pointer-events: none;
}
.cn-walkthrough__live[data-v-5691d49a] {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
}
.cn-walkthrough__dim[data-v-5691d49a] {
position: fixed;
background: var(--color-modal-background, rgba(0, 0, 0, 0.5));
pointer-events: auto;
}
.cn-walkthrough__dim--full[data-v-5691d49a] {
inset: 0;
}
.cn-walkthrough__ring[data-v-5691d49a] {
position: fixed;
border-radius: var(--border-radius-large, 8px);
box-shadow: 0 0 0 2px var(--color-primary-element, #0082c9);
pointer-events: none;
}
.cn-walkthrough__card[data-v-5691d49a] {
position: fixed;
width: 320px;
max-width: calc(100vw - 24px);
background: var(--color-main-background);
color: var(--color-main-text);
border-radius: var(--border-radius-large, 8px);
box-shadow: 0 2px 12px var(--color-box-shadow, rgba(0, 0, 0, 0.3));
padding: 16px;
pointer-events: auto;
}
.cn-walkthrough__close[data-v-5691d49a] {
/* !important beats NcButton's own `position: relative`, which would otherwise
leave the close button in-flow at the card's top-left. */
position: absolute !important;
top: 8px;
inset-inline-end: 8px;
inset-inline-start: auto;
z-index: 1;
}
.cn-walkthrough__counter[data-v-5691d49a] {
font-size: 0.8125rem;
color: var(--color-text-maxcontrast);
margin-bottom: 4px;
/* Keep the counter/title clear of the absolutely-positioned close button. */
padding-inline-end: 32px;
}
.cn-walkthrough__title[data-v-5691d49a] {
margin: 0 0 6px;
font-size: 1.1rem;
}
.cn-walkthrough__body[data-v-5691d49a] {
margin: 0 0 8px;
}
.cn-walkthrough__task[data-v-5691d49a] {
margin: 0 0 8px;
padding: 8px;
background: var(--color-primary-element-light, var(--color-background-hover));
border-radius: var(--border-radius, 4px);
font-weight: 600;
}
.cn-walkthrough__task-icon[data-v-5691d49a] {
margin-inline-end: 4px;
}
.cn-walkthrough__actions[data-v-5691d49a] {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
}
.cn-walkthrough__spacer[data-v-5691d49a] {
flex: 1 1 auto;
}
.cn-rich-submit__description[data-v-7928f0a2] {
color: var(--color-text-maxcontrast);
margin-bottom: 12px;
}
.cn-rich-submit__field[data-v-7928f0a2] {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 14px;
}
.cn-rich-submit__label[data-v-7928f0a2] {
font-weight: 600;
}
.cn-rich-submit__required[data-v-7928f0a2] {
color: var(--color-error);
margin-left: 2px;
}
.cn-rich-submit__reason-list[data-v-7928f0a2] {
display: flex;
flex-direction: column;
gap: 6px;
}
.cn-rich-submit__reason-option[data-v-7928f0a2] {
display: flex;
flex-direction: column;
gap: 2px;
padding: 8px 12px;
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
cursor: pointer;
}
.cn-rich-submit__reason-option--active[data-v-7928f0a2] {
border-color: var(--color-primary-element);
background: var(--color-primary-element-light);
}
.cn-rich-submit__reason-label[data-v-7928f0a2] {
font-weight: 500;
}
.cn-rich-submit__reason-description[data-v-7928f0a2] {
color: var(--color-text-maxcontrast);
}
.cn-rich-submit__textarea[data-v-7928f0a2] {
width: 100%;
padding: 8px 10px;
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
background: var(--color-main-background);
resize: vertical;
}
.cn-rich-submit__file[data-v-7928f0a2] {
padding: 6px 0;
}
.cn-rich-submit__hint[data-v-7928f0a2] {
color: var(--color-text-maxcontrast);
}
.cn-rich-submit__file-list[data-v-7928f0a2] {
margin: 6px 0 0;
padding-left: 20px;
}
.cn-signature-capture[data-v-b6056322] {
display: flex;
flex-direction: column;
gap: 8px;
}
.cn-signature-capture__mode-picker[data-v-b6056322] {
display: flex;
gap: 12px;
}
.cn-signature-capture__mode-option[data-v-b6056322] {
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
}
.cn-signature-capture__mode-option--active[data-v-b6056322] {
font-weight: 600;
}
.cn-signature-capture__typed-input[data-v-b6056322] {
width: 100%;
padding: 8px 10px;
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
background: var(--color-main-background);
}
.cn-signature-capture__typed-preview[data-v-b6056322] {
min-height: 60px;
padding: 8px 12px;
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
background: var(--color-background-hover);
font-size: 28px;
color: var(--color-main-text);
display: flex;
align-items: center;
justify-content: center;
}
.cn-signature-capture__canvas[data-v-b6056322] {
border: 1px dashed var(--color-border);
border-radius: var(--border-radius);
background: var(--color-main-background);
width: 100%;
max-width: 100%;
touch-action: none;
cursor: crosshair;
}
.cn-signature-capture__hint[data-v-b6056322] {
color: var(--color-text-maxcontrast);
}
.cn-signature-capture__affirmation[data-v-b6056322] {
display: flex;
gap: 8px;
align-items: flex-start;
}
.cn-signature-capture__actions[data-v-b6056322] {
display: flex;
justify-content: flex-end;
}
.cn-signature-capture__clear[data-v-b6056322] {
background: none;
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
padding: 6px 12px;
cursor: pointer;
}
.cn-signature-capture__clear[data-v-b6056322]:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.cn-register-mapping__group[data-v-13882291] {
margin-bottom: 24px;
border: 1px solid var(--color-border);
border-radius: var(--border-radius-large);
padding: 20px;
background: var(--color-background-hover);
}
.cn-register-mapping__group[data-v-13882291]:last-child {
margin-bottom: 0;
}
.cn-register-mapping__group-header[data-v-13882291] {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.cn-register-mapping__group-title[data-v-13882291] {
font-size: 16px;
font-weight: 600;
margin: 0;
color: var(--color-main-text);
}
.cn-register-mapping__group-status[data-v-13882291] {
font-size: 13px;
color: var(--color-text-maxcontrast);
}
.cn-register-mapping__group-description[data-v-13882291] {
color: var(--color-text-maxcontrast);
font-size: 13px;
margin: 0 0 12px 0;
}
.cn-register-mapping__label[data-v-13882291] {
display: block;
font-weight: 500;
font-size: 13px;
color: var(--color-text-maxcontrast);
margin-bottom: 4px;
}
.cn-register-mapping__register-select[data-v-13882291] {
margin-bottom: 16px;
max-width: 400px;
}
.cn-register-mapping__type-list[data-v-13882291] {
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
overflow: hidden;
background: var(--color-main-background);
}
.cn-register-mapping__type-list-header[data-v-13882291] {
display: grid;
grid-template-columns: 1fr 1fr 40px 32px;
align-items: center;
padding: 8px 16px;
font-size: 12px;
font-weight: 600;
color: var(--color-text-maxcontrast);
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 1px solid var(--color-border);
background: var(--color-background-hover);
}
.cn-register-mapping__type-row[data-v-13882291] {
display: grid;
grid-template-columns: 1fr 1fr 40px 32px;
align-items: center;
padding: 10px 16px;
border-bottom: 1px solid var(--color-border);
cursor: pointer;
transition: background-color 0.15s ease;
}
.cn-register-mapping__type-row[data-v-13882291]:hover {
background: var(--color-background-hover);
}
.cn-register-mapping__type-row--expanded[data-v-13882291] {
background: var(--color-background-hover);
}
.cn-register-mapping__type-name[data-v-13882291] {
font-weight: 500;
color: var(--color-main-text);
}
.cn-register-mapping__type-schema[data-v-13882291] {
color: var(--color-text-maxcontrast);
font-size: 13px;
}
.cn-register-mapping__type-status[data-v-13882291] {
display: flex;
justify-content: center;
}
.cn-register-mapping__type-chevron[data-v-13882291] {
display: flex;
justify-content: center;
color: var(--color-text-maxcontrast);
}
.cn-register-mapping__status-dot[data-v-13882291] {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
}
.cn-register-mapping__status-dot--configured[data-v-13882291] {
background-color: var(--color-success);
}
.cn-register-mapping__status-dot--unconfigured[data-v-13882291] {
background-color: var(--color-warning);
}
.cn-register-mapping__type-detail[data-v-13882291] {
padding: 12px 16px 16px;
border-bottom: 1px solid var(--color-border);
background: var(--color-main-background);
}
.cn-register-mapping__type-description[data-v-13882291] {
color: var(--color-text-maxcontrast);
font-size: 13px;
margin: 0 0 8px 0;
}
/* Slide transition */
.slide-enter-active[data-v-13882291],
.slide-leave-active[data-v-13882291] {
transition: all 0.2s ease;
max-height: 200px;
overflow: hidden;
}
.slide-enter[data-v-13882291],
.slide-leave-to[data-v-13882291] {
max-height: 0;
padding-top: 0;
padding-bottom: 0;
opacity: 0;
}
/* Last row in list should not have bottom border */
.cn-register-mapping__type-list[data-v-13882291] > :last-child {
border-bottom: none;
}
@media (max-width: 768px) {
.cn-register-mapping__type-list-header[data-v-13882291] {
display: none;
}
.cn-register-mapping__type-row[data-v-13882291] {
grid-template-columns: 1fr auto 32px;
}
.cn-register-mapping__type-schema[data-v-13882291] {
display: none;
}
.cn-register-mapping__register-select[data-v-13882291] {
max-width: none;
}
}
.cn-theme-preview[data-v-3d531562] {
display: flex;
flex-direction: column;
gap: 12px;
}
.cn-theme-preview__controls[data-v-3d531562] {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.cn-theme-preview__picker[data-v-3d531562] {
display: flex;
flex-direction: column;
gap: 4px;
}
.cn-theme-preview__picker-label[data-v-3d531562] {
font-weight: 500;
font-size: 0.85em;
}
.cn-theme-preview__picker-text[data-v-3d531562] {
width: 90px;
padding: 4px 6px;
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
background: var(--color-main-background);
font-family: monospace;
}
.cn-theme-preview__preview[data-v-3d531562] {
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
padding: 16px;
background: var(--background, #fff);
color: var(--text, #1b1b1b);
min-height: 200px;
}
.cn-theme-preview__sample[data-v-3d531562] {
display: flex;
flex-direction: column;
gap: 12px;
}
.cn-theme-preview__sample-header[data-v-3d531562] {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 8px;
border-bottom: 1px solid var(--text, #1b1b1b);
}
.cn-theme-preview__sample-title[data-v-3d531562] {
font-size: 1.4em;
font-weight: 700;
color: var(--primary, #21468B);
}
.cn-theme-preview__sample-button[data-v-3d531562] {
background: var(--primary, #21468B);
color: var(--background, #fff);
border: none;
padding: 6px 14px;
border-radius: var(--border-radius);
cursor: pointer;
}
.cn-theme-preview__sample-body p[data-v-3d531562] {
margin: 0 0 8px;
}
.cn-theme-preview__sample-list[data-v-3d531562] {
margin: 0 0 8px;
padding-left: 18px;
}
.cn-theme-preview__sample-list-active[data-v-3d531562] {
color: var(--primary, #21468B);
font-weight: 600;
}
.cn-theme-preview__sample-link[data-v-3d531562] {
color: var(--primary, #21468B);
text-decoration: underline;
}
.cn-theme-preview__actions[data-v-3d531562] {
display: flex;
justify-content: flex-end;
}
.cn-theme-preview__reset[data-v-3d531562] {
background: none;
border: 1px solid var(--color-border);
padding: 6px 12px;
border-radius: var(--border-radius);
cursor: pointer;
}
.cn-theme-preview__reset[data-v-3d531562]:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.cn-relationship-graph[data-v-2e9abfe7] {
display: flex;
flex-direction: column;
gap: 8px;
}
.cn-relationship-graph__title[data-v-2e9abfe7] {
margin: 0;
font-size: 1.1em;
}
.cn-relationship-graph__description[data-v-2e9abfe7] {
margin: 4px 0 0;
color: var(--color-text-maxcontrast);
}
.cn-relationship-graph__svg[data-v-2e9abfe7] {
width: 100%;
max-width: 100%;
height: auto;
font-family: var(--font-face, sans-serif);
}
.cn-relationship-graph__node[data-v-2e9abfe7] {
cursor: pointer;
}
.cn-relationship-graph__node:hover circle[data-v-2e9abfe7] {
stroke-width: 3;
}
.cn-relationship-graph__node-label[data-v-2e9abfe7] {
fill: var(--color-main-text);
font-size: 12px;
pointer-events: none;
}
.cn-relationship-graph__edge-label[data-v-2e9abfe7] {
fill: var(--color-text-maxcontrast);
font-size: 10px;
pointer-events: none;
}
.cn-relationship-graph__legend[data-v-2e9abfe7] {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
font-size: 0.85em;
}
.cn-relationship-graph__legend-entry[data-v-2e9abfe7] {
display: inline-flex;
align-items: center;
gap: 6px;
}
.cn-relationship-graph__legend-dot[data-v-2e9abfe7] {
width: 12px;
height: 12px;
border-radius: 50%;
display: inline-block;
}
.cn-flow-index__bar[data-v-5b9d56b3] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-block-end: 12px;
}
.cn-flow-index__table[data-v-5b9d56b3] {
inline-size: 100%;
border-collapse: collapse;
}
.cn-flow-index__table th[data-v-5b9d56b3],
.cn-flow-index__table td[data-v-5b9d56b3] {
padding: 8px;
text-align: start;
border-block-end: 1px solid var(--color-border);
}
.cn-flow-index__row[data-v-5b9d56b3] {
cursor: pointer;
}
.cn-flow-index__row[data-v-5b9d56b3]:hover {
background: var(--color-background-hover);
}
.cn-flow-index__muted[data-v-5b9d56b3] {
color: var(--color-text-maxcontrast);
font-size: 0.9em;
}
.cn-flow-index__warn[data-v-5b9d56b3] {
color: var(--color-warning-text, var(--color-error-text));
}
.cn-flow-index__ok[data-v-5b9d56b3] {
color: var(--color-success-text);
}
.cn-action-buttons[data-v-df015e5e] {
display: inline-flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.cn-locked-banner[data-v-5339346f] {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 16px;
border-radius: var(--border-radius-large, 8px);
background-color: var(--color-warning-hover, rgba(233, 163, 0, 0.15));
border: 1px solid var(--color-warning, #e9a300);
margin-bottom: 16px;
}
.cn-locked-banner__icon[data-v-5339346f] {
color: var(--color-warning, #e9a300);
flex-shrink: 0;
margin-top: 2px;
}
.cn-locked-banner__body[data-v-5339346f] {
flex: 1;
min-width: 0;
}
.cn-locked-banner__message[data-v-5339346f] {
margin: 0;
font-weight: 600;
color: var(--color-main-text, #222);
}
.cn-locked-banner__sub[data-v-5339346f] {
margin: 4px 0 0;
font-size: 13px;
color: var(--color-text-maxcontrast, #767676);
}
.cn-dashboard-grid[data-v-9f6b1a22] {
width: 100%;
min-height: 200px;
}
.grid-stack[data-v-9f6b1a22] {
background: transparent;
}
/* Screen-reader-only text: the keyboard key map and the live region. Kept in
the layout (not `display: none`) so assistive tech still reads it. */
.cn-dashboard-grid__sr-only[data-v-9f6b1a22] {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Grid items become tab stops in edit mode — give them a visible focus ring
that satisfies WCAG 2.1 SC 2.4.7 without relying on the widget's own
styling. `outline-offset` keeps the ring outside the rounded card. */
.grid-stack-item[data-v-9f6b1a22]:focus-visible {
outline: 2px solid var(--color-primary-element, #0082c9);
outline-offset: 2px;
border-radius: var(--border-radius-container-large, 16px);
}
[data-v-9f6b1a22] .grid-stack-item-content {
background: var(--color-main-background);
border: none;
box-shadow: none;
overflow: hidden;
}
[data-v-9f6b1a22] .grid-stack-item-content:has(.cn-widget-wrapper--borderless) {
background: transparent;
}
[data-v-9f6b1a22] .grid-stack-placeholder > .placeholder-content {
background: var(--color-primary-element-light);
border: 2px dashed var(--color-primary-element);
border-radius: var(--border-radius-large);
}
.cn-transition-input[data-v-1529f8b6] {
display: flex;
flex-direction: column;
gap: 12px;
padding: 4px 0;
}
.cn-lifecycle-actions[data-v-a62ad362] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 0 0 8px;
}
.cn-lifecycle-actions__error[data-v-a62ad362] {
color: var(--color-error);
font-size: 0.85em;
margin: 0;
flex-basis: 100%;
}
.cn-summary-aggregates[data-v-09d813af] {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: 0 0 4px;
}
.cn-summary-aggregates__chip[data-v-09d813af] {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 6px 12px;
border-radius: var(--border-radius-large, 12px);
background: var(--color-background-hover);
min-width: 72px;
}
.cn-summary-aggregates__value[data-v-09d813af] {
font-size: 1.25em;
font-weight: 600;
line-height: 1.2;
color: var(--color-main-text);
}
.cn-summary-aggregates__label[data-v-09d813af] {
font-size: 0.8em;
color: var(--color-text-maxcontrast);
}
.cn-related-collections[data-v-095b9b22] {
display: flex;
flex-direction: column;
gap: 16px;
}
.cn-related-collections__header[data-v-095b9b22] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 8px;
}
.cn-related-collections__title[data-v-095b9b22] {
margin: 0;
font-size: 1.1em;
font-weight: 600;
}
.cn-body-sections[data-v-41c005a2] {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
}
.cn-body-sections--grid[data-v-41c005a2] {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 16px;
}
.cn-body-sections__section[data-v-41c005a2] {
min-width: 0;
}
.cn-body-sections__title[data-v-41c005a2] {
margin: 0 0 8px;
font-size: 16px;
font-weight: 600;
color: var(--color-main-text);
}
.cn-body-sections__error[data-v-41c005a2] {
padding: 12px 16px;
border: 1px solid var(--color-border);
border-radius: var(--border-radius-large, 12px);
background-color: var(--color-background-hover);
color: var(--color-text-maxcontrast);
font-size: 14px;
}
/* NcDialog owns the padding and the heading (via `name`), so the wrapper and
title rules the NcModal markup needed are gone. */
.cn-widget-style-editor__section[data-v-a7722c4a] {
margin-bottom: 24px;
padding-bottom: 24px;
border-bottom: 1px solid var(--color-border);
}
.cn-widget-style-editor__section[data-v-a7722c4a]:last-of-type {
border-bottom: none;
}
.cn-widget-style-editor__section-title[data-v-a7722c4a] {
font-size: 14px;
font-weight: 600;
margin: 0 0 16px;
color: var(--color-text-maxcontrast);
text-transform: uppercase;
}
.cn-widget-style-editor__row[data-v-a7722c4a] {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.cn-widget-style-editor__label[data-v-a7722c4a] {
width: 80px;
flex-shrink: 0;
}
.cn-widget-style-editor__color-preview[data-v-a7722c4a] {
width: 20px;
height: 20px;
border-radius: 4px;
border: 1px solid var(--color-border);
}
/* The actions row itself is NcDialog's `#actions` slot now; only the right-hand
button cluster inside it still needs its own layout. */
.cn-widget-style-editor__actions-right[data-v-a7722c4a] {
display: flex;
gap: 12px;
}
.cn-widget-style-editor__icon-option[data-v-a7722c4a] {
display: flex;
align-items: center;
gap: 12px;
padding: 4px 0;
}
.cn-widget-style-editor__icon-preview[data-v-a7722c4a] {
width: 24px;
height: 24px;
display: block;
flex-shrink: 0;
fill: currentColor;
object-fit: contain;
}
.cn-widget-style-editor__icon-label[data-v-a7722c4a] {
flex: 1;
}
.cn-relation-link[data-v-02b07c82] {
padding: 20px;
display: flex;
flex-direction: column;
gap: 12px;
}
.cn-relation-link__error[data-v-02b07c82] {
color: var(--color-error);
font-size: 0.85em;
margin: 0;
}
.cn-form-page {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1rem;
max-width: 720px;
margin: 0 auto;
color: var(--color-main-text);
}
.cn-form-page__form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.cn-form-page__steps-nav {
width: 100%;
}
.cn-form-page__steps {
display: flex;
flex-wrap: wrap;
gap: 1rem;
list-style: none;
margin: 0;
padding: 0;
}
.cn-form-page__step {
color: var(--color-text-maxcontrast);
font-weight: normal;
}
.cn-form-page__step--current {
color: var(--color-main-text);
font-weight: bold;
}
.cn-form-page__step--done {
color: var(--color-main-text);
}
.cn-form-page__step-check {
color: var(--color-primary-element);
margin-right: 0.25rem;
}
.cn-form-page__step-description {
color: var(--color-text-maxcontrast);
margin: 0;
}
.cn-form-page__field {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.cn-form-page__field-help {
color: var(--color-text-maxcontrast);
font-size: 0.85em;
}
.cn-form-page__field-error {
color: var(--color-error);
font-size: 0.85em;
margin: 0;
}
.cn-form-page__error {
color: var(--color-error);
background: var(--color-error-hover, transparent);
padding: 0.5rem 0.75rem;
border-radius: var(--border-radius);
}
.cn-form-page__success {
color: var(--color-success-text, var(--color-main-text));
background: var(--color-success-hover, transparent);
padding: 1rem;
border-radius: var(--border-radius);
text-align: center;
}
.cn-form-page__actions {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
}
.cn-form-page__submit {
display: flex;
justify-content: flex-start;
gap: 0.5rem;
margin-top: 0.5rem;
}
.cn-widget-card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: calc(2 * var(--default-grid-baseline, 4px));
}
.cn-nav-card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: calc(2 * var(--default-grid-baseline, 4px));
}
.cn-nav-card-grid__card {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px;
background: var(--color-main-background);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-large, 10px);
color: var(--color-main-text);
text-decoration: none;
cursor: pointer;
transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.cn-nav-card-grid__card:hover,
.cn-nav-card-grid__card:focus-visible {
border-color: var(--color-primary-element);
box-shadow: 0 2px 8px var(--color-box-shadow);
}
.cn-nav-card-grid__card--disabled {
cursor: not-allowed;
opacity: 0.5;
}
.cn-nav-card-grid__card--disabled:hover {
border-color: var(--color-border);
box-shadow: none;
}
.cn-nav-card-grid__icon {
flex-shrink: 0;
color: var(--color-primary-element);
}
.cn-nav-card-grid__body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.cn-nav-card-grid__label {
font-size: 16px;
font-weight: 600;
line-height: 1.3;
}
.cn-nav-card-grid__description {
font-size: 13px;
color: var(--color-text-maxcontrast);
line-height: 1.4;
}
.cn-nav-card-grid__count {
flex-shrink: 0;
}
.cn-integration-widget[data-v-773b476b] {
width: 100%;
display: flex;
flex-direction: column;
min-height: 0;
}
.cn-integration-widget__tabbar[data-v-773b476b] {
display: flex;
align-items: flex-end;
gap: 8px;
border-bottom: 1px solid var(--color-border);
margin-bottom: 12px;
}
.cn-integration-widget__tabs[data-v-773b476b] {
display: flex;
flex-wrap: wrap;
gap: 2px;
flex: 1;
min-width: 0;
}
.cn-integration-widget__tab[data-v-773b476b] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
background: transparent;
border: none;
border-bottom: 2px solid transparent;
border-radius: var(--border-radius) var(--border-radius) 0 0;
color: var(--color-text-maxcontrast);
font-size: 0.95em;
cursor: pointer;
}
.cn-integration-widget__tab[data-v-773b476b]:hover {
background: var(--color-background-hover);
color: var(--color-main-text);
}
.cn-integration-widget__tab[data-v-773b476b]:focus-visible {
outline: 2px solid var(--color-primary-element);
outline-offset: -2px;
}
.cn-integration-widget__tab--active[data-v-773b476b] {
color: var(--color-main-text);
font-weight: 600;
border-bottom-color: var(--cn-iw-accent, var(--color-primary-element));
}
.cn-integration-widget__tab-icon[data-v-773b476b] {
color: var(--cn-iw-accent, currentColor);
flex-shrink: 0;
}
.cn-integration-widget__tab-label[data-v-773b476b] {
white-space: nowrap;
}
.cn-integration-widget__header[data-v-773b476b] {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 4px;
margin-bottom: 8px;
border-bottom: 2px solid var(--cn-iw-accent, var(--color-border));
}
.cn-integration-widget__header-icon[data-v-773b476b] {
color: var(--cn-iw-accent, var(--color-main-text));
flex-shrink: 0;
}
.cn-integration-widget__header-label[data-v-773b476b] {
font-weight: 600;
color: var(--color-main-text);
}
.cn-integration-widget__header-actions[data-v-773b476b] {
margin-inline-start: auto;
flex-shrink: 0;
}
.cn-integration-widget__panel[data-v-773b476b] {
flex: 1;
min-height: 0;
}
.cn-integration-widget__panel[data-v-773b476b]:focus-visible {
outline: 2px solid var(--color-primary-element);
outline-offset: -2px;
}
.cn-leaf-mount-host[data-v-167bbf41] {
display: flex;
flex-direction: column;
min-height: 0;
height: 100%;
}
.cn-leaf-mount-host__container[data-v-167bbf41] {
flex: 1 1 auto;
min-height: 0;
}
.cn-leaf-mount-host__error[data-v-167bbf41] {
padding: 20px;
color: var(--color-text-maxcontrast);
text-align: center;
}
.cn-widget-renderer[data-v-c73ecde2] {
height: 100%;
padding: 8px;
}
.cn-widget-renderer__loading[data-v-c73ecde2] {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.cn-tile-widget[data-v-03800522] {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
background-color: var(--cn-tile-bg);
}
.cn-tile-widget__link[data-v-03800522] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
text-decoration: none;
padding: 20px;
gap: 12px;
transition: transform 0.2s ease, opacity 0.2s ease;
background-color: var(--cn-tile-bg);
color: var(--cn-tile-text);
}
.cn-tile-widget__link[data-v-03800522]:hover {
transform: scale(1.02);
opacity: 0.95;
}
.cn-tile-widget__icon[data-v-03800522] {
font-size: 48px;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.cn-tile-widget__icon--svg[data-v-03800522] {
width: 48px;
height: 48px;
}
.cn-tile-widget__icon span.icon[data-v-03800522] {
display: inline-block;
width: 48px;
height: 48px;
background-size: 48px;
filter: brightness(0) invert(1);
}
.cn-tile-widget__icon img[data-v-03800522] {
width: 100%;
height: 100%;
object-fit: contain;
}
.cn-tile-widget__emoji[data-v-03800522] {
font-size: 48px;
}
.cn-tile-widget__title[data-v-03800522] {
font-size: 16px;
font-weight: 700;
text-align: center;
word-break: break-word;
line-height: 1.3;
color: var(--cn-tile-text);
}
.cn-widget-ref-item[data-v-72404c82] {
width: 100%;
}
.cn-widget-ref-item__loading[data-v-72404c82] {
display: flex;
align-items: center;
justify-content: center;
min-height: 120px;
}
.cn-widget-ref-item__error[data-v-72404c82] {
min-height: 120px;
}
.cn-date-range-picker[data-v-2257a5f5] {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.cn-date-range-picker__preset[data-v-2257a5f5] {
min-width: 180px;
}
.cn-date-range-picker__from[data-v-2257a5f5],
.cn-date-range-picker__to[data-v-2257a5f5] {
min-width: 160px;
}
.cn-date-range-picker__separator[data-v-2257a5f5] {
color: var(--color-text-maxcontrast);
font-size: 14px;
}
.cn-dashboard-page[data-v-824052fe] {
padding: 20px;
max-width: 1400px;
/* Scroll the dashboard itself when its widgets are taller than the host
region (height:100% is a no-op when the host height is content-sized, so
this only kicks in when an ancestor constrains the height). */
height: 100%;
overflow-y: auto;
box-sizing: border-box;
}
.cn-dashboard-page__header[data-v-824052fe] {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 20px;
flex-wrap: wrap;
gap: 12px;
/* Clear the Nextcloud navigation toggle button (44px wide, absolutely
positioned at the left edge of .app-content) plus 12px breathing
room. Only the HEADER shifts right — body widgets keep full width. */
padding-inline-start: 56px;
}
.cn-dashboard-page__header-left[data-v-824052fe] {
min-width: 0;
}
.cn-dashboard-page__title[data-v-824052fe] {
margin: 0;
font-size: 20px;
font-weight: 700;
}
.cn-dashboard-page__description[data-v-824052fe] {
margin: 4px 0 0;
font-size: 14px;
color: var(--color-text-maxcontrast);
}
/* NOTE: the date-range chip's trigger/chip/preset-spacer rules live in the
UNSCOPED \3c style> block below, anchored on the trigger's `data-testid`, not
here. Consumers (pipelinq, …) split the library across webpack chunks with
no shared runtime chunk, so a rendered CnDashboardPage instance can carry a
different `data-v-*` scope id than the one baked into this scoped CSS — the
scoped chip rules then silently don't match and the chip collapses into
NcActions' ~30px icon slot (text wraps to "Last / 30 / days"). The
data-testid is stable across chunks, so those rules match regardless. */
.cn-dashboard-page__header-actions[data-v-824052fe] {
display: flex;
gap: 8px;
flex-wrap: wrap;
flex-shrink: 0;
/* Keeps the actions hard right even when a wide action set (pipelinq's six
buttons) wraps onto its own line. The header's `justify-content:
space-between` only distributes items WITHIN a line, so once the actions
wrap they become the sole item on line 2 and would otherwise sit flush
left, under the title. No-op while title and actions share a line. */
margin-left: auto;
}
/* Date-range header band. Kept compact so it doesn't open a tall gap
above the grid; the pills variant is a single tidy toggle row. */
.cn-dashboard-page__date-range[data-v-824052fe] {
margin-bottom: 12px;
}
.cn-dashboard-page__date-range--pills[data-v-824052fe] {
margin-bottom: 8px;
}
.cn-dashboard-page__date-pills[data-v-824052fe] {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
}
.cn-dashboard-page__date-pill[data-v-824052fe] {
display: inline-flex;
align-items: center;
padding: 5px 14px;
border: 1px solid var(--color-border);
border-radius: 999px;
background: var(--color-main-background);
color: var(--color-main-text);
font-size: 13px;
font-weight: 500;
line-height: 1.2;
white-space: nowrap;
cursor: pointer;
transition: background-color 100ms ease, border-color 100ms ease, color 100ms ease;
}
.cn-dashboard-page__date-pill[data-v-824052fe]:hover {
background: var(--color-background-hover);
}
.cn-dashboard-page__date-pill[data-v-824052fe]:focus-visible {
outline: 2px solid var(--color-primary-element);
outline-offset: 2px;
}
.cn-dashboard-page__date-pill--active[data-v-824052fe] {
background: var(--color-primary-element);
border-color: var(--color-primary-element);
color: var(--color-primary-element-text);
}
.cn-dashboard-page__date-pill--active[data-v-824052fe]:hover {
background: var(--color-primary-element-hover, var(--color-primary-element));
}
/* The custom-range pill is de-emphasised — dashed outline, muted text —
so it reads as an escape hatch rather than a primary option. */
.cn-dashboard-page__date-pill--custom[data-v-824052fe] {
border-style: dashed;
color: var(--color-text-maxcontrast);
}
.cn-dashboard-page__date-pill-custom[data-v-824052fe] .action-item__menutoggle {
min-width: 0;
min-height: 0;
padding: 0;
background: transparent;
border: none;
}
.cn-dashboard-page__date-pill-custom[data-v-824052fe] .button-vue,
.cn-dashboard-page__date-pill-custom[data-v-824052fe] .button-vue__wrapper,
.cn-dashboard-page__date-pill-custom[data-v-824052fe] .button-vue__icon {
width: auto !important;
min-width: 0 !important;
overflow: visible !important;
}
.cn-dashboard-page__empty[data-v-824052fe] {
padding: 60px 20px;
}
.cn-dashboard-page__page-filters[data-v-824052fe] {
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: flex-end;
margin-bottom: 12px;
}
.cn-dashboard-page__page-filter[data-v-824052fe] {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 200px;
}
.cn-dashboard-page__page-filter-label[data-v-824052fe] {
font-size: 0.85em;
font-weight: 600;
color: var(--color-text-maxcontrast);
}
.cn-dashboard-page__widget-edit[data-v-824052fe] {
position: absolute;
top: 4px;
inset-inline-end: 4px;
z-index: 5;
background: var(--color-main-background);
border-radius: var(--border-radius);
box-shadow: 0 1px 4px var(--color-box-shadow, rgba(0, 0, 0, 0.2));
}
/* Card-fit registry widgets (stat / gauge / delta): the tile content is a
self-contained card that should size to the tile and centre vertically,
never scroll. CnWidgetWrapper's content area defaults to overflow:auto +
16px padding, which produced stray scrollbars on short KPI / gauge tiles
and a horizontal scrollbar when a long currency value met the icon. Here
we drop the inner scroll, add comfortable padding back (flush removed it),
and centre the card. */
.cn-dashboard-page__card-fit[data-v-824052fe] .cn-widget-wrapper__content,
.cn-dashboard-page__card-fit.cn-widget-wrapper--flush[data-v-824052fe] .cn-widget-wrapper__content {
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
padding: 8px 14px;
}
/* Chart tiles whose graph FITS the tile (see isChartFitted — a percentage
height, which getChartProps supplies unless the author pinned pixels), so
the wrapper's default `overflow: auto` content area has nothing to scroll —
and leaving it on means any rounding difference between the box and the SVG
shows up as a scrollbar the user has to drag to see the whole graph. Same
shape as the card-fit rule above, minus the padding: chart tiles render
`flush`, and apexcharts already draws its own margins. */
.cn-dashboard-page__chart-fit[data-v-824052fe] .cn-widget-wrapper__content {
overflow: hidden;
display: flex;
flex-direction: column;
min-height: 0;
}
/* Card content (stat / gauge / delta) must fit the tile width: let the
widget shrink and its value/label truncate instead of pushing past the
tile edge (the horizontal clip on long currency values). */
.cn-dashboard-page__card-fit[data-v-824052fe] .cn-stat-widget,
.cn-dashboard-page__card-fit[data-v-824052fe] .cn-gauge-widget,
.cn-dashboard-page__card-fit[data-v-824052fe] .cn-delta-widget {
min-width: 0;
max-width: 100%;
}
.cn-dashboard-page__unknown[data-v-824052fe] {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
color: var(--color-text-maxcontrast);
font-size: 14px;
padding: 16px;
}
/* widget-ref content items */
.cn-dashboard-page__content[data-v-824052fe] {
display: flex;
flex-direction: column;
gap: 16px;
}
.cn-dashboard-page__content-item[data-v-824052fe] {
width: 100%;
}
/* Trigger: strip NcActions' default button chrome down to just the chip span. */
[data-testid^="cn-dashboard-page-date-chip-"].cn-dashboard-page__date-chip-trigger {
display: inline-flex;
}
/* The toggle is a chrome-less carrier for the pill — the pill IS the control.
NcButton paints its own background, ~30px box and `--border-radius-element`
corners on hover / focus / :active / aria-expanded; left alone that draws a
rounded SQUARE behind (and around) the wider, fully-rounded pill. Every
state is neutralised with `!important` because NcButton's own state rules
are more specific than a plain class selector. */
[data-testid^="cn-dashboard-page-date-chip-"] .action-item__menutoggle,
[data-testid^="cn-dashboard-page-date-chip-"] .action-item__menutoggle:hover,
[data-testid^="cn-dashboard-page-date-chip-"] .action-item__menutoggle:focus,
[data-testid^="cn-dashboard-page-date-chip-"] .action-item__menutoggle:focus-visible,
[data-testid^="cn-dashboard-page-date-chip-"] .action-item__menutoggle:active,
[data-testid^="cn-dashboard-page-date-chip-"] .action-item__menutoggle[aria-expanded="true"] {
min-width: 0 !important;
min-height: 0 !important;
height: auto !important;
padding: 0 !important;
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 999px;
}
/* The chip text lives in NcActions' icon slot, whose default toggle is sized
for a single icon and clips/wraps wider content. Let the toggle + its icon
wrapper grow to the chip's natural width so "Last 30 days" reads on one
line — and keep them shrink-wrapped so the pill isn't offset inside a wider
box (which is what pushed the chip outside its own trigger). */
[data-testid^="cn-dashboard-page-date-chip-"] .button-vue,
[data-testid^="cn-dashboard-page-date-chip-"] .button-vue__wrapper,
[data-testid^="cn-dashboard-page-date-chip-"] .button-vue__icon {
width: auto !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
}
/* The width above is NOT enough on its own, and this rule is what actually
frees the pill. NcButton pins an icon-only button to a square clickable area
with an `!important` of its own:
.button-vue[data-v-…]:has(.button-vue__text:empty):not(.button-vue--wide) {
width: var(--button-size) !important; // --default-clickable-area, 34px
}
NcActions fills the trigger's text slot from its `menuName` prop, which the
chip does not use (its label is markup, not a string), so `.button-vue__text`
renders empty and that rule always matches here. Two `!important`
declarations are settled by SPECIFICITY, and theirs is (0,5,0) against the
(0,2,0) of the plain descendant selector above — so the button stayed 34px
wide while its icon wrapper grew to the pill's ~106px. Combined with the
`overflow: visible` above, the pill then rendered centred on a 34px box and
spilled ~36px out each side, over the widget title.
This selector re-states their `:has()` predicate — so it applies exactly
where theirs does, and drops out with it on a browser without `:has()` — and
adds the trigger's own three hooks, reaching (0,7,0). Keep it ahead of
whatever NcButton declares: tests/components/CnDashboardPageDateChip.spec.js
reads both selectors out of the installed NcButton stylesheet and fails when
this margin disappears. */
[data-testid^="cn-dashboard-page-date-chip-"].cn-dashboard-page__date-chip-trigger.action-item
.button-vue.action-item__menutoggle:has(.button-vue__text:empty) {
width: auto !important;
min-width: 0 !important;
}
.cn-dashboard-page__date-chip {
display: inline-flex;
align-items: center;
/* Breathing room from the widget title / header edge — the chip sits in
CnWidgetWrapper's `#title-meta` slot, flush against its neighbours. */
margin-inline: 4px;
padding: 2px 10px;
border-radius: 999px;
background: var(--color-background-hover);
color: var(--color-text-maxcontrast);
font-size: 12px;
font-variant-numeric: tabular-nums;
white-space: nowrap;
cursor: pointer;
transition: background 100ms ease, color 100ms ease;
}
[data-testid^="cn-dashboard-page-date-chip-"]:hover .cn-dashboard-page__date-chip,
[data-testid^="cn-dashboard-page-date-chip-"]:focus-within .cn-dashboard-page__date-chip {
background: var(--color-primary-element-light, var(--color-background-darker));
color: var(--color-main-text);
}
/* Open state: the pill itself goes primary. The active affordance is the
pill's own colour — never a separate box painted behind it. */
[data-testid^="cn-dashboard-page-date-chip-"] .action-item__menutoggle[aria-expanded="true"] .cn-dashboard-page__date-chip {
background: var(--color-primary-element);
color: var(--color-primary-element-text);
}
/* Keyboard focus needs a visible ring now that the button chrome is gone. */
[data-testid^="cn-dashboard-page-date-chip-"] .action-item__menutoggle:focus-visible .cn-dashboard-page__date-chip {
outline: 2px solid var(--color-primary-element);
outline-offset: 2px;
}
/* Empty span keeping preset NcActionButtons' labels aligned with the row that
shows the current-selection CalendarRange icon (NcActionButton icon slot is
~20px). Lives in the teleported popper, so it's unscoped too. */
.cn-dashboard-page__date-chip-preset-spacer {
display: inline-block;
width: 16px;
height: 16px;
}
.action-item__popper[data-testid^="cn-dashboard-page-date-chip-"] .v-popper__inner,
[data-testid^="cn-dashboard-page-date-chip-"].v-popper__popper .v-popper__inner {
overflow: visible;
}
[data-testid^="cn-dashboard-page-date-chip-"] .action-input__form,
[data-testid^="cn-dashboard-page-date-chip-"] .action-input {
min-width: 240px;
}
/* White rounded button matching the widget chrome — a persistent surface (not
the default transparent tertiary) so the cog reads on any widget background.
The trigger element is NcActions' menu toggle. */
.cn-widget-edit-cog[data-v-1b45aa55] .action-item__menutoggle,
.cn-widget-edit-cog[data-v-1b45aa55] .button-vue {
background-color: var(--color-main-background) !important;
border: 1px solid var(--color-border) !important;
border-radius: var(--border-radius, 8px) !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
color: var(--color-main-text) !important;
}
.cn-widget-edit-cog[data-v-1b45aa55] .action-item__menutoggle:hover,
.cn-widget-edit-cog[data-v-1b45aa55] .button-vue:hover {
background-color: var(--color-background-hover) !important;
}
/* Match vue-material-design-icons: inline path icons inherit text colour. */
.cn-dashboard-icon__path[data-v-4811d535] {
fill: currentColor;
}
.cn-icon-picker[data-v-a84ce0e2] {
display: flex;
flex-direction: column;
gap: 12px;
}
/* Compact (popover) mode for inline / table use. */
.cn-icon-picker--compact[data-v-a84ce0e2] {
display: inline-block;
position: relative;
}
.cn-icon-picker--compact > .cn-icon-picker__trigger[data-v-a84ce0e2] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
background: var(--color-main-background);
cursor: pointer;
list-style: none;
}
.cn-icon-picker--compact > .cn-icon-picker__trigger[data-v-a84ce0e2]::-webkit-details-marker {
display: none;
}
.cn-icon-picker--compact .cn-icon-picker__panel[data-v-a84ce0e2] {
position: absolute;
z-index: 50;
top: calc(100% + 4px);
inset-inline-start: 0;
min-width: 240px;
padding: 8px;
display: flex;
flex-direction: column;
gap: 8px;
background: var(--color-main-background);
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
box-shadow: 0 2px 8px var(--color-box-shadow, rgba(0, 0, 0, 0.2));
}
.cn-icon-picker__preview[data-v-a84ce0e2] {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid var(--color-border);
border-radius: 4px;
background-color: var(--color-background-hover);
}
.cn-icon-picker__sources[data-v-a84ce0e2] {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.cn-icon-picker__source[data-v-a84ce0e2] {
padding: 4px 10px;
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
background: var(--color-main-background);
color: var(--color-main-text);
cursor: pointer;
font-size: 13px;
}
.cn-icon-picker__source--active[data-v-a84ce0e2] {
border-color: var(--color-primary-element);
background: var(--color-primary-element-light, var(--color-background-hover));
}
.cn-icon-picker__search[data-v-a84ce0e2] {
width: 100%;
padding: 6px 10px;
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
background: var(--color-main-background);
color: var(--color-main-text);
}
.cn-icon-picker__grid[data-v-a84ce0e2] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
gap: 6px;
max-height: 200px;
overflow-y: auto;
padding: 4px;
border: 1px solid var(--color-border);
border-radius: var(--border-radius, 4px);
}
.cn-icon-picker__icon[data-v-a84ce0e2] {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
border: 2px solid transparent;
border-radius: var(--border-radius, 4px);
background: transparent;
cursor: pointer;
color: var(--color-main-text);
}
.cn-icon-picker__icon[data-v-a84ce0e2]:hover {
background: var(--color-background-hover);
}
.cn-icon-picker__icon--selected[data-v-a84ce0e2] {
border-color: var(--color-primary-element);
background: var(--color-primary-element-light, var(--color-background-hover));
}
.cn-icon-picker__svg[data-v-a84ce0e2] {
width: 20px;
height: 20px;
}
.cn-icon-picker__hint[data-v-a84ce0e2] {
margin: 0;
font-size: 12px;
color: var(--color-text-maxcontrast);
font-style: italic;
}
.cn-icon-picker__placement[data-v-a84ce0e2] {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.cn-icon-picker__placement-label[data-v-a84ce0e2] {
font-size: 13px;
font-weight: bold;
color: var(--color-text);
}
.cn-icon-picker__custom[data-v-a84ce0e2] {
display: flex;
flex-direction: column;
gap: 8px;
}
.cn-icon-picker__format[data-v-a84ce0e2] {
align-self: flex-start;
padding: 4px 12px;
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
background: var(--color-background-hover);
color: var(--color-main-text);
cursor: pointer;
font-size: 13px;
}
.cn-icon-picker__upload-label[data-v-a84ce0e2] {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
}
.cn-icon-picker__file-input[data-v-a84ce0e2] {
display: none;
}
.cn-icon-picker__upload-button[data-v-a84ce0e2] {
padding: 6px 12px;
border: 1px solid var(--color-border);
border-radius: 4px;
background-color: var(--color-background-hover);
font-size: 14px;
transition: background-color 0.2s;
}
.cn-icon-picker__upload-label:hover .cn-icon-picker__upload-button[data-v-a84ce0e2] {
background-color: var(--color-background-dark);
}
.cn-icon-picker__error[data-v-a84ce0e2] {
margin: 0;
padding: 4px 8px;
font-size: 12px;
color: var(--color-error);
background-color: var(--color-background-hover);
border-radius: 2px;
}
.cn-timeline-view[data-v-13e54322] {
display: flex;
flex-direction: column;
gap: 12px;
}
.cn-timeline-view__title[data-v-13e54322] {
margin: 0;
font-size: 1.1em;
}
.cn-timeline-view__description[data-v-13e54322] {
margin: 4px 0 0;
color: var(--color-text-maxcontrast);
}
.cn-timeline-view__empty[data-v-13e54322] {
color: var(--color-text-maxcontrast);
font-style: italic;
margin: 16px 0;
text-align: center;
}
.cn-timeline-view__groups[data-v-13e54322] {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 16px;
}
.cn-timeline-view__group-header[data-v-13e54322] {
display: flex;
gap: 8px;
align-items: baseline;
padding-bottom: 6px;
border-bottom: 1px solid var(--color-border);
}
.cn-timeline-view__group-label[data-v-13e54322] {
font-weight: 600;
}
.cn-timeline-view__group-count[data-v-13e54322] {
font-size: 0.85em;
color: var(--color-text-maxcontrast);
}
.cn-timeline-view__group-events[data-v-13e54322] {
margin: 0;
padding: 8px 0 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 6px;
}
.cn-timeline-view__event[data-v-13e54322] {
display: grid;
grid-template-columns: 110px 1fr;
gap: 12px;
padding: 8px 12px;
border-radius: var(--border-radius);
background: var(--color-background-hover);
cursor: pointer;
align-items: center;
}
.cn-timeline-view__event[data-v-13e54322]:hover {
background: var(--color-background-darker, var(--color-background-hover));
}
.cn-timeline-view__event-time[data-v-13e54322] {
font-family: monospace;
font-weight: 600;
color: var(--color-primary-element);
}
.cn-timeline-view__event-title[data-v-13e54322] {
font-weight: 500;
}
.cn-timeline-view__event-location[data-v-13e54322],
.cn-timeline-view__event-description[data-v-13e54322] {
color: var(--color-text-maxcontrast);
display: block;
}
.cn-timeline-view__event--break[data-v-13e54322] {
opacity: 0.65;
}
.cn-timeline-view__event--holiday[data-v-13e54322] {
background: var(--color-warning-hover, var(--color-background-hover));
}
.cn-item-card[data-v-99212562] {
background: var(--color-main-background);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-large, 10px);
padding: 12px;
margin-bottom: 12px;
}
.cn-item-card[data-v-99212562]:last-child {
margin-bottom: 0;
}
.cn-item-card__header[data-v-99212562] {
display: flex;
align-items: center;
justify-content: space-between;
}
.cn-item-card__title-row[data-v-99212562] {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
flex: 1;
}
.cn-item-card__title-content[data-v-99212562] {
display: flex;
flex-direction: column;
min-width: 0;
}
.cn-item-card__title[data-v-99212562] {
margin: 0;
font-size: 1em;
font-weight: 600;
color: var(--color-main-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cn-item-card__subtitle[data-v-99212562] {
font-size: 0.85em;
color: var(--color-text-maxcontrast);
}
.cn-item-card__actions[data-v-99212562] {
flex-shrink: 0;
}
.cn-item-card__content[data-v-99212562] {
margin-top: 8px;
}
.cn-search-page[data-v-bb8c94e2] {
display: flex;
flex-direction: column;
gap: 16px;
padding: 16px;
}
/* Reserve room for NcAppNavigationToggle (matches CnPageRenderer / CnPageHeader). */
.cn-search-page__header[data-v-bb8c94e2] {
padding-inline-start: 56px;
}
.cn-search-page__title[data-v-bb8c94e2] {
margin: 0 0 8px;
font-size: 1.4em;
}
.cn-search-page__query[data-v-bb8c94e2] {
display: flex;
gap: 8px;
}
.cn-search-page__input[data-v-bb8c94e2] {
flex: 1 1 auto;
padding: 8px 12px;
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
background: var(--color-main-background);
font-size: 1em;
}
.cn-search-page__submit[data-v-bb8c94e2] {
background: var(--color-primary-element);
color: var(--color-primary-element-text, #fff);
border: none;
padding: 8px 16px;
border-radius: var(--border-radius);
cursor: pointer;
}
.cn-search-page__body[data-v-bb8c94e2] {
display: grid;
grid-template-columns: 240px 1fr;
gap: 16px;
}
.cn-search-page__body[data-v-bb8c94e2]:has(:not(.cn-search-page__facets)) {
grid-template-columns: 1fr;
}
.cn-search-page__facets[data-v-bb8c94e2] {
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
padding: 12px;
display: flex;
flex-direction: column;
gap: 12px;
background: var(--color-background-hover);
}
.cn-search-page__facets-title[data-v-bb8c94e2] {
margin: 0;
font-size: 1em;
}
.cn-search-page__facet-title[data-v-bb8c94e2] {
margin: 0 0 4px;
font-size: 0.9em;
}
.cn-search-page__facet-options[data-v-bb8c94e2] {
list-style: none;
margin: 0;
padding: 0;
}
.cn-search-page__facet-option[data-v-bb8c94e2] {
display: flex;
gap: 4px;
}
.cn-search-page__facet-option label[data-v-bb8c94e2] {
display: flex;
gap: 6px;
align-items: center;
cursor: pointer;
font-size: 0.9em;
}
.cn-search-page__facet-count[data-v-bb8c94e2] {
color: var(--color-text-maxcontrast);
}
.cn-search-page__clear-facets[data-v-bb8c94e2] {
background: none;
border: 1px solid var(--color-border);
padding: 4px 8px;
border-radius: var(--border-radius);
cursor: pointer;
font-size: 0.85em;
align-self: flex-start;
}
.cn-search-page__list[data-v-bb8c94e2] {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 6px;
}
.cn-search-page__result[data-v-bb8c94e2] {
padding: 10px 12px;
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
cursor: pointer;
background: var(--color-main-background);
}
.cn-search-page__result[data-v-bb8c94e2]:hover {
background: var(--color-background-hover);
}
.cn-search-page__result-head[data-v-bb8c94e2] {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.cn-search-page__result-title[data-v-bb8c94e2] {
font-weight: 600;
}
.cn-search-page__result-badge[data-v-bb8c94e2] {
font-size: 0.75em;
padding: 1px 8px;
border-radius: 9999px;
background: var(--color-background-hover);
color: var(--color-text-maxcontrast);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.cn-search-page__result-snippet[data-v-bb8c94e2] {
margin: 4px 0 0;
color: var(--color-text-maxcontrast);
}
.cn-search-page__result-subtitle[data-v-bb8c94e2] {
color: var(--color-text-maxcontrast);
}
.cn-search-page__empty[data-v-bb8c94e2],
.cn-search-page__idle[data-v-bb8c94e2],
.cn-search-page__loading[data-v-bb8c94e2] {
color: var(--color-text-maxcontrast);
margin: 24px 0;
text-align: center;
font-style: italic;
}
.cn-search-page__more[data-v-bb8c94e2] {
margin-top: 12px;
color: var(--color-text-maxcontrast);
text-align: center;
}
.cn-command-palette[data-v-d6bda7a2] {
display: flex;
flex-direction: column;
gap: 8px;
min-height: 0;
}
.cn-command-palette__input-row[data-v-d6bda7a2] {
display: flex;
}
.cn-command-palette__input[data-v-d6bda7a2] {
flex: 1 1 auto;
padding: 10px 14px;
font-size: 1.1em;
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
background: var(--color-main-background);
color: var(--color-main-text);
}
.cn-command-palette__input[data-v-d6bda7a2]:focus-visible {
outline: 2px solid var(--color-primary-element);
outline-offset: 2px;
}
/* Visually hidden but announced — the live result count. */
.cn-command-palette__status[data-v-d6bda7a2] {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
margin: -1px;
}
.cn-command-palette__list[data-v-d6bda7a2] {
list-style: none;
margin: 0;
padding: 0;
max-height: 50vh;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 2px;
}
.cn-command-palette__section-label[data-v-d6bda7a2] {
padding: 8px 10px 2px;
font-size: 0.75em;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-maxcontrast);
}
.cn-command-palette__option[data-v-d6bda7a2] {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: var(--border-radius);
cursor: pointer;
}
.cn-command-palette__option--active[data-v-d6bda7a2],
.cn-command-palette__option[data-v-d6bda7a2]:hover {
background: var(--color-background-hover);
}
.cn-command-palette__option-icon[data-v-d6bda7a2] {
flex: 0 0 auto;
color: var(--color-text-maxcontrast);
}
.cn-command-palette__option-title[data-v-d6bda7a2] {
flex: 1 1 auto;
color: var(--color-main-text);
}
.cn-command-palette__option-subtitle[data-v-d6bda7a2] {
flex: 0 0 auto;
font-size: 0.85em;
color: var(--color-text-maxcontrast);
}
.cn-command-palette__empty[data-v-d6bda7a2] {
padding: 24px 12px;
text-align: center;
color: var(--color-text-maxcontrast);
font-style: italic;
margin: 0;
}
.cn-tree-node[data-v-7302062c] {
list-style: none;
}
.cn-tree-node__row[data-v-7302062c] {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 6px;
border-radius: var(--border-radius);
cursor: pointer;
}
.cn-tree-node__row[data-v-7302062c]:hover {
background: var(--color-background-hover);
}
.cn-tree-node--selected > .cn-tree-node__row[data-v-7302062c] {
background: var(--color-primary-element-light);
color: var(--color-main-text);
}
.cn-tree-node__toggle[data-v-7302062c] {
background: none;
border: none;
cursor: pointer;
padding: 0;
width: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.cn-tree-node__toggle--leaf[data-v-7302062c] {
cursor: default;
}
.cn-tree-node__caret[data-v-7302062c] {
display: inline-block;
transition: transform 0.15s ease;
font-size: 0.9em;
color: var(--color-text-maxcontrast);
}
.cn-tree-node__caret--open[data-v-7302062c] {
transform: rotate(90deg);
color: var(--color-main-text);
}
.cn-tree-node__icon[data-v-7302062c] {
font-size: 0.9em;
}
.cn-tree-node__label[data-v-7302062c] {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cn-tree-node__badge[data-v-7302062c] {
font-size: 0.8em;
padding: 1px 6px;
border-radius: 9999px;
background: var(--color-background-hover);
color: var(--color-text-maxcontrast);
}
.cn-tree-node__children[data-v-7302062c] {
margin: 0;
padding: 0;
list-style: none;
}
.cn-tree-view[data-v-7758894f] {
display: flex;
flex-direction: column;
gap: 8px;
}
.cn-tree-view__title[data-v-7758894f] {
margin: 0;
font-size: 1.1em;
}
.cn-tree-view__description[data-v-7758894f] {
margin: 4px 0 0;
color: var(--color-text-maxcontrast);
}
.cn-tree-view__empty[data-v-7758894f] {
color: var(--color-text-maxcontrast);
font-style: italic;
margin: 16px 0;
text-align: center;
}
.cn-tree-view__root[data-v-7758894f] {
margin: 0;
padding: 0;
list-style: none;
}
.cn-file-manager[data-v-34e5835d] {
display: flex;
flex-direction: column;
gap: 12px;
}
.cn-file-manager__title[data-v-34e5835d] {
margin: 0;
font-size: 1.1em;
}
.cn-file-manager__description[data-v-34e5835d] {
margin: 4px 0 0;
color: var(--color-text-maxcontrast);
}
.cn-file-manager__dropzone[data-v-34e5835d] {
border: 2px dashed var(--color-border);
border-radius: var(--border-radius);
padding: 24px;
text-align: center;
background: var(--color-background-hover);
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
}
.cn-file-manager__dropzone[data-v-34e5835d]:hover,
.cn-file-manager__dropzone--active[data-v-34e5835d] {
background: var(--color-primary-element-light);
border-color: var(--color-primary-element);
}
.cn-file-manager__dropzone p[data-v-34e5835d] {
margin: 0;
}
.cn-file-manager__dropzone small[data-v-34e5835d] {
display: block;
margin-top: 4px;
color: var(--color-text-maxcontrast);
}
.cn-file-manager__file-input[data-v-34e5835d] {
display: none;
}
.cn-file-manager__empty[data-v-34e5835d] {
color: var(--color-text-maxcontrast);
font-style: italic;
margin: 16px 0;
text-align: center;
}
.cn-file-manager__list[data-v-34e5835d] {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 4px;
}
.cn-file-manager__item[data-v-34e5835d] {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 12px;
border-radius: var(--border-radius);
background: var(--color-background-hover);
cursor: pointer;
}
.cn-file-manager__item[data-v-34e5835d]:hover {
background: var(--color-background-darker, var(--color-background-hover));
}
.cn-file-manager__item-icon[data-v-34e5835d] {
font-size: 1.4em;
}
.cn-file-manager__item-meta[data-v-34e5835d] {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.cn-file-manager__item-name[data-v-34e5835d] {
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cn-file-manager__item-sub[data-v-34e5835d] {
color: var(--color-text-maxcontrast);
}
.cn-file-manager__item-actions[data-v-34e5835d] {
display: flex;
gap: 4px;
}
.cn-file-manager__action[data-v-34e5835d] {
background: none;
border: 1px solid var(--color-border);
padding: 4px 8px;
border-radius: var(--border-radius);
cursor: pointer;
font-size: 0.85em;
}
.cn-file-manager__action[data-v-34e5835d]:hover {
background: var(--color-main-background);
}
.cn-file-manager__action--delete[data-v-34e5835d] {
color: var(--color-error);
}
.cn-file-manager__action[data-v-34e5835d]:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.cn-related-files[data-v-614521af] {
display: flex;
flex-direction: column;
gap: 12px;
}
.cn-related-files__title[data-v-614521af] {
margin: 0;
font-size: 1.1em;
}
.cn-related-files__description[data-v-614521af] {
margin: 4px 0 0;
color: var(--color-text-maxcontrast);
}
.cn-related-files__add[data-v-614521af] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.cn-related-files__add-button[data-v-614521af] {
background: var(--color-primary-element);
color: var(--color-primary-element-text);
border: none;
padding: 6px 14px;
border-radius: var(--border-radius);
cursor: pointer;
font-size: 0.9em;
}
.cn-related-files__add-button[data-v-614521af]:hover {
background: var(--color-primary-element-hover);
}
.cn-related-files__path-add[data-v-614521af] {
display: flex;
align-items: center;
gap: 4px;
flex: 1 1 auto;
min-width: 0;
}
.cn-related-files__path-field[data-v-614521af] {
flex: 1 1 auto;
min-width: 0;
padding: 5px 8px;
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
background: var(--color-main-background);
}
.cn-related-files__path-button[data-v-614521af] {
background: none;
border: 1px solid var(--color-border);
padding: 5px 10px;
border-radius: var(--border-radius);
cursor: pointer;
font-size: 0.85em;
}
.cn-related-files__path-button[data-v-614521af]:hover {
background: var(--color-background-hover);
}
.cn-related-files__path-button[data-v-614521af]:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.cn-related-files__empty[data-v-614521af] {
color: var(--color-text-maxcontrast);
font-style: italic;
margin: 16px 0;
text-align: center;
}
.cn-related-files__list[data-v-614521af] {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 4px;
}
.cn-related-files__item[data-v-614521af] {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 12px;
border-radius: var(--border-radius);
background: var(--color-background-hover);
}
.cn-related-files__item[data-v-614521af]:hover {
background: var(--color-background-darker, var(--color-background-hover));
}
.cn-related-files__item-icon[data-v-614521af] {
font-size: 1.4em;
}
.cn-related-files__item-meta[data-v-614521af] {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.cn-related-files__item-name[data-v-614521af] {
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cn-related-files__item-path[data-v-614521af],
.cn-related-files__item-description[data-v-614521af] {
color: var(--color-text-maxcontrast);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cn-related-files__item-actions[data-v-614521af] {
display: flex;
gap: 4px;
}
.cn-related-files__action[data-v-614521af] {
background: none;
border: 1px solid var(--color-border);
padding: 4px 8px;
border-radius: var(--border-radius);
cursor: pointer;
font-size: 0.85em;
}
.cn-related-files__action[data-v-614521af]:hover {
background: var(--color-main-background);
}
.cn-related-files__action--remove[data-v-614521af] {
color: var(--color-error);
}
.cn-integration-tab__banner[data-v-7fc86c4f] {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
margin-bottom: 10px;
border-radius: var(--border-radius);
background: var(--color-warning, #e9a40f);
color: var(--color-main-background);
font-size: 0.9em;
}
.cn-integration-tab__error[data-v-7fc86c4f] {
color: var(--color-error);
font-size: 0.9em;
margin: 4px 0 8px;
}
.cn-integration-tab__list[data-v-7fc86c4f] {
list-style: none;
margin: 0;
padding: 0;
}
.cn-integration-tab__row[data-v-7fc86c4f] {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 0;
border-bottom: 1px solid var(--color-border);
}
.cn-integration-tab__row[data-v-7fc86c4f]:last-child {
border-bottom: none;
}
.cn-integration-tab__icon[data-v-7fc86c4f] {
color: var(--color-text-maxcontrast);
flex-shrink: 0;
}
.cn-integration-tab__row-main[data-v-7fc86c4f] {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.cn-integration-tab__title[data-v-7fc86c4f] {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--color-main-text);
text-decoration: none;
}
a.cn-integration-tab__title[data-v-7fc86c4f]:hover {
text-decoration: underline;
}
.cn-integration-tab__subtitle[data-v-7fc86c4f] {
font-size: 0.8em;
color: var(--color-text-maxcontrast);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cn-object-access-tab[data-v-0b814c9f] {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.cn-object-access-tab__section[data-v-0b814c9f] {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.cn-object-access-tab__heading[data-v-0b814c9f] {
margin: 0;
font-weight: 600;
color: var(--color-main-text);
}
.cn-object-access-tab__hint[data-v-0b814c9f],
.cn-object-access-tab__meta[data-v-0b814c9f] {
color: var(--color-text-maxcontrast);
font-size: 0.85rem;
margin: 0;
}
.cn-object-access-tab__list[data-v-0b814c9f] {
list-style: none;
margin: 0;
padding: 0;
}
.cn-object-access-tab__row[data-v-0b814c9f] {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.25rem 0;
}
.cn-object-access-tab__row-main[data-v-0b814c9f] {
display: flex;
flex-direction: column;
min-width: 0;
flex: 1;
}
.cn-object-access-tab__principal[data-v-0b814c9f] {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cn-object-access-tab__banner[data-v-0b814c9f],
.cn-object-access-tab__error[data-v-0b814c9f] {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--color-error);
}
.cn-object-access-tab__link code[data-v-0b814c9f] {
word-break: break-all;
}
.cn-integration-card__empty[data-v-f7e9bbfa] {
color: var(--color-text-maxcontrast);
font-size: 0.9em;
padding: 8px 0;
}
.cn-integration-card__chip[data-v-f7e9bbfa] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
border-radius: 12px;
background: var(--color-background-hover);
font-size: 0.9em;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.cn-integration-card__chip-sub[data-v-f7e9bbfa] {
color: var(--color-text-maxcontrast);
}
.cn-integration-card__list[data-v-f7e9bbfa] {
list-style: none;
margin: 0;
padding: 0;
}
.cn-integration-card__row[data-v-f7e9bbfa] {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 0;
border-bottom: 1px solid var(--color-border);
}
.cn-integration-card__row[data-v-f7e9bbfa]:last-child {
border-bottom: none;
}
.cn-integration-card__icon[data-v-f7e9bbfa] {
color: var(--color-text-maxcontrast);
flex-shrink: 0;
}
.cn-integration-card__row-main[data-v-f7e9bbfa] {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.cn-integration-card__title[data-v-f7e9bbfa] {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--color-main-text);
text-decoration: none;
}
a.cn-integration-card__title[data-v-f7e9bbfa]:hover {
text-decoration: underline;
}
.cn-integration-card__subtitle[data-v-f7e9bbfa] {
font-size: 0.8em;
color: var(--color-text-maxcontrast);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cn-integration-widget-grid[data-v-5f190a37] {
width: 100%;
}
.cn-integration-widget-grid__grid[data-v-5f190a37] {
display: grid;
grid-template-columns: repeat(var(--cn-iwg-columns, 3), minmax(0, 1fr));
gap: calc(3 * var(--default-grid-baseline, 4px));
}
@media (max-width: 1199px) {
.cn-integration-widget-grid__grid[data-v-5f190a37] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cn-integration-widget-grid__cell[data-v-5f190a37] {
grid-column: span 1 !important;
}
}
@media (max-width: 767px) {
.cn-integration-widget-grid__grid[data-v-5f190a37] {
grid-template-columns: 1fr;
}
.cn-integration-widget-grid__cell[data-v-5f190a37] {
grid-column: 1 !important;
}
}
.cn-integration-widget-grid__cell[data-v-5f190a37] {
min-height: var(--cn-iwg-min-height, auto);
display: flex;
flex-direction: column;
}
.cn-integration-widget-grid__cell[data-v-5f190a37] > * {
flex: 1;
min-height: 0;
}
.cn-integration-widget-grid__empty[data-v-5f190a37] {
padding: 24px;
text-align: center;
color: var(--color-text-maxcontrast);
font-size: 14px;
}
.cn-card[data-v-0dd5dd2f] {
padding: 16px;
border: 1px solid var(--color-border);
border-radius: var(--border-radius-large);
background: var(--color-main-background);
height: 100%;
display: flex;
flex-direction: column;
}
.cn-card--active[data-v-0dd5dd2f] {
border: 2px solid var(--cn-card-active-border);
}
.cn-card--clickable[data-v-0dd5dd2f] {
cursor: pointer;
transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.cn-card--clickable[data-v-0dd5dd2f]:hover {
border-color: var(--color-primary-element);
box-shadow: 0 2px 8px var(--color-box-shadow);
}
.cn-card__header[data-v-0dd5dd2f] {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
align-items: center;
border-bottom: 1px solid var(--color-border);
padding-block-end: 1rem;
margin-block-end: 0.5rem;
}
.cn-card__title[data-v-0dd5dd2f] {
display: flex;
align-items: center;
gap: 6px;
font-size: 16px;
margin: 0;
min-width: 0;
}
.cn-card__title-text[data-v-0dd5dd2f] {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cn-card__labels[data-v-0dd5dd2f] {
grid-column: 1/-1;
display: flex;
gap: 4px;
flex-wrap: wrap;
margin-top: 6px;
}
.cn-card__actions[data-v-0dd5dd2f] {
flex-shrink: 0;
margin-inline-start: 0.25rem;
}
.cn-card__body[data-v-0dd5dd2f] {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.cn-card__description[data-v-0dd5dd2f] {
color: var(--color-text-lighter);
margin-bottom: 12px;
word-wrap: break-word;
overflow-wrap: break-word;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.cn-card__content[data-v-0dd5dd2f] {
margin-bottom: 12px;
}
.cn-card__stats[data-v-0dd5dd2f] {
display: flex;
flex-direction: column;
gap: 4px;
}
.cn-card__stat[data-v-0dd5dd2f] {
display: flex;
justify-content: space-between;
}
.cn-card__stat-label[data-v-0dd5dd2f] {
color: var(--color-text-lighter);
font-size: 12px;
}
.cn-card__stat-value[data-v-0dd5dd2f] {
font-weight: 600;
font-size: 12px;
}
.cn-card__footer[data-v-0dd5dd2f] {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
padding-top: 8px;
margin-top: 8px;
border-top: 1px solid var(--color-border);
}
.cn-card__footer-link[data-v-0dd5dd2f] {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.85em;
color: var(--color-primary-element);
text-decoration: none;
transition: color 0.2s;
}
.cn-card__footer-link[data-v-0dd5dd2f]:hover {
text-decoration: underline;
}
.cn-progress-bar__items[data-v-b15e7472] {
display: flex;
flex-direction: column;
gap: 8px;
}
.cn-progress-bar__item[data-v-b15e7472] {
display: flex;
flex-direction: column;
gap: 4px;
}
.cn-progress-bar__label[data-v-b15e7472] {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.9rem;
}
.cn-progress-bar__name[data-v-b15e7472] {
color: var(--color-main-text);
}
.cn-progress-bar__name--tooltip[data-v-b15e7472] {
cursor: help;
text-decoration: underline;
text-decoration-style: dotted;
text-underline-offset: 2px;
}
.cn-progress-bar__name--tooltip[data-v-b15e7472]:hover {
text-decoration-style: solid;
}
.cn-progress-bar__value[data-v-b15e7472] {
color: var(--color-text-maxcontrast);
font-variant-numeric: tabular-nums;
}
.cn-progress-bar__track[data-v-b15e7472] {
background: var(--color-background-dark, var(--color-background-darker));
overflow: hidden;
}
.cn-progress-bar__track--rounded[data-v-b15e7472] {
border-radius: 4px;
}
.cn-progress-bar__fill[data-v-b15e7472] {
height: 100%;
transition: width 0.3s ease;
}
.cn-progress-bar__fill--rounded[data-v-b15e7472] {
border-radius: 4px;
}
/* Variant colors */
.cn-progress-bar__fill--default[data-v-b15e7472] {
background: var(--color-main-text);
}
.cn-progress-bar__fill--primary[data-v-b15e7472] {
background: var(--color-primary-element);
}
.cn-progress-bar__fill--success[data-v-b15e7472] {
background: var(--color-success);
}
.cn-progress-bar__fill--warning[data-v-b15e7472] {
background: var(--color-warning);
}
.cn-progress-bar__fill--error[data-v-b15e7472] {
background: var(--color-error);
}
.cn-progress-bar__fill--info[data-v-b15e7472] {
background: var(--color-info, #0082c9);
}
.cn-stats-panel__section[data-v-2ed2c44f] {
padding: 12px 0;
border-bottom: 1px solid var(--color-border);
}
.remove-margin[data-v-2ed2c44f] {
margin: 0;
}
.cn-stats-panel__section[data-v-2ed2c44f]:last-child {
border-bottom: none;
}
.cn-stats-panel__section-title[data-v-2ed2c44f] {
color: var(--color-text-maxcontrast);
font-size: 14px;
font-weight: bold;
padding: 0 16px;
margin: 0 0 12px 0;
}
.cn-stats-panel__stack[data-v-2ed2c44f] {
display: flex;
flex-direction: column;
gap: 12px;
}
.cn-stats-panel__loading[data-v-2ed2c44f] {
display: flex;
align-items: center;
gap: 8px;
padding: 0 16px;
color: var(--color-text-maxcontrast);
}
.cn-stats-panel__empty[data-v-2ed2c44f] {
padding: 0 16px;
color: var(--color-text-maxcontrast);
font-style: italic;
}
.cn-stats-panel__header[data-v-2ed2c44f] {
padding-bottom: 12px;
border-bottom: 1px solid var(--color-border);
}
.cn-stats-panel__footer[data-v-2ed2c44f] {
padding-top: 12px;
}
.cn-stats-panel__list[data-v-2ed2c44f] {
margin-top: 4px;
}
.cn-people-widget-form[data-v-1a9583cf] {
display: flex;
flex-direction: column;
gap: 12px;
}
.cn-people-widget-form__field[data-v-1a9583cf] {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 14px;
}
.cn-people-widget-form__field--inline[data-v-1a9583cf] {
flex-direction: row;
align-items: center;
gap: 8px;
}
.cn-people-widget-form__input[data-v-1a9583cf] {
padding: 6px 10px;
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
background: var(--color-main-background);
color: var(--color-main-text);
font: inherit;
}
.cn-people-widget-form__error[data-v-1a9583cf] {
color: var(--color-error, #c00);
font-size: 12px;
}
.cn-calendar-widget-form[data-v-96672822] {
display: flex;
flex-direction: column;
gap: 12px;
}
.cn-calendar-widget-form__field[data-v-96672822] {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 14px;
}
.cn-calendar-widget-form__label[data-v-96672822] {
font-weight: 500;
}
.cn-calendar-widget-form__textarea[data-v-96672822] {
width: 100%;
padding: 6px 8px;
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
background: var(--color-main-background);
color: var(--color-main-text);
font-family: inherit;
font-size: 13px;
resize: vertical;
}
.cn-spend-analytics-widget-form[data-v-1eb1f32f] {
display: flex;
flex-direction: column;
gap: 12px;
}
.cn-spend-analytics-widget-form__toggle[data-v-1eb1f32f] {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
}
.cn-nc-widget-grid-picker__grid[data-v-f0d8cb62] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 12px;
}
.cn-nc-widget-grid-picker__card[data-v-f0d8cb62] {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 12px 8px;
border: 2px solid var(--color-border);
border-radius: var(--border-radius-large, var(--border-radius));
background: var(--color-main-background);
color: var(--color-main-text);
cursor: pointer;
min-height: 96px;
transition: border-color 0.12s ease-in-out, background-color 0.12s ease-in-out;
}
.cn-nc-widget-grid-picker__card[data-v-f0d8cb62]:hover {
background: var(--color-background-hover);
}
.cn-nc-widget-grid-picker__card[data-v-f0d8cb62]:focus {
outline: 2px solid var(--color-primary-element);
outline-offset: 2px;
}
.cn-nc-widget-grid-picker__card--selected[data-v-f0d8cb62] {
border-color: var(--color-primary-element);
}
.cn-nc-widget-grid-picker__icon-wrap[data-v-f0d8cb62] {
position: relative;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.cn-nc-widget-grid-picker__icon[data-v-f0d8cb62] {
width: 40px;
height: 40px;
object-fit: contain;
display: block;
}
.cn-nc-widget-grid-picker__icon--placeholder[data-v-f0d8cb62] {
border-radius: 50%;
background: var(--color-background-dark);
color: var(--color-main-text);
font-size: 14px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
}
.cn-nc-widget-grid-picker__check[data-v-f0d8cb62] {
position: absolute;
bottom: -4px;
right: -4px;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary-element);
color: var(--color-primary-element-text);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 0 2px var(--color-main-background);
}
.cn-nc-widget-grid-picker__title[data-v-f0d8cb62] {
width: 100%;
font-size: 13px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cn-nc-widget-grid-picker__empty[data-v-f0d8cb62] {
padding: 16px;
text-align: center;
color: var(--color-text-maxcontrast);
font-style: italic;
}
.cn-nc-dashboard-widget-form[data-v-952b6a6e] {
display: flex;
flex-direction: column;
gap: 12px;
}
.cn-nc-dashboard-widget-form__field[data-v-952b6a6e] {
display: flex;
flex-direction: column;
gap: 4px;
}
.cn-nc-dashboard-widget-form__label[data-v-952b6a6e] {
font-size: 14px;
font-weight: 500;
}
.cn-nc-dashboard-widget-form__search[data-v-952b6a6e] {
width: 100%;
padding: 6px 8px;
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
background: var(--color-main-background);
color: var(--color-main-text);
}
/* Cap the picker height so the long widget catalog scrolls within the modal
instead of making it thousands of pixels tall. */
.cn-nc-dashboard-widget-form__picker[data-v-952b6a6e] {
max-height: 320px;
overflow-y: auto;
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
padding: 4px;
}
.cn-nc-dashboard-widget-form__empty[data-v-952b6a6e] {
margin: 8px;
font-size: 13px;
color: var(--color-text-maxcontrast);
}
.cn-nc-dashboard-widget-form__select[data-v-952b6a6e] {
width: 100%;
padding: 6px 8px;
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
background: var(--color-main-background);
color: var(--color-main-text);
}
/* NcAppSidebar lays every tab out as an equal share of the sidebar width
* (`flex: 1 1`) with an ellipsis caption, so an object with many tabs — e.g. a
* lead's 5+ tabs — shrinks them until the labels truncate. Keep the tabs
* equal-width (uniform) but stop them shrinking below a readable minimum, and
* let the strip scroll horizontally once they no longer fit. `flex-basis: 0`
* + equal grow keeps every tab the same width whether the row fits or scrolls.
* Apps with longer labels can widen the floor via --cn-sidebar-tab-min-width. */
[data-v-b89adf96] .app-sidebar-tabs__nav {
overflow-x: auto;
}
[data-v-b89adf96] .app-sidebar-tabs__nav .app-sidebar-tabs__tab {
flex-grow: 1;
flex-shrink: 0;
flex-basis: 0;
/* !important to beat NcAppSidebar's own min-width on the button variant. */
min-width: var(--cn-sidebar-tab-min-width, 7rem) !important;
}
.cn-info-widget[data-v-32858522] {
display: grid;
gap: 12px 24px;
}
.cn-info-widget__field[data-v-32858522] {
display: flex;
flex-direction: column;
gap: 2px;
}
.cn-info-widget__label[data-v-32858522] {
font-size: 12px;
font-weight: 600;
color: var(--color-text-maxcontrast);
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 0;
}
.cn-info-widget__value[data-v-32858522] {
font-size: 14px;
color: var(--color-main-text);
margin: 0;
word-break: break-word;
}
/* Responsive: single column on small screens */
@media (max-width: 600px) {
.cn-info-widget[data-v-32858522] {
grid-template-columns: 1fr !important;
}
}
/* Padding matches CnIndexPage / CnDetailPage (see css/index-page.css and
css/detail-page.css) — a logs page had none at all, so its table ran flush
into both edges of the app content area. Gaps are expressed in the same
grid-baseline unit as the rest of the fleet rather than raw pixels. */
.cn-logs-page[data-v-18d3ce6f] {
display: flex;
flex-direction: column;
gap: calc(4 * var(--default-grid-baseline));
padding: calc(5 * var(--default-grid-baseline));
box-sizing: border-box;
}
.cn-logs-page__actions[data-v-18d3ce6f] {
display: flex;
justify-content: flex-end;
gap: calc(2 * var(--default-grid-baseline));
}
.cn-logs-page__loading[data-v-18d3ce6f],
.cn-logs-page__empty[data-v-18d3ce6f],
.cn-logs-page__error[data-v-18d3ce6f] {
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
}
.cn-logs-page__pagination[data-v-18d3ce6f] {
margin-top: calc(3 * var(--default-grid-baseline));
}
.cn-logs-page__detail[data-v-18d3ce6f] {
display: flex;
flex-direction: column;
gap: calc(2 * var(--default-grid-baseline));
padding: 0 calc(3 * var(--default-grid-baseline)) calc(3 * var(--default-grid-baseline));
}
.cn-logs-page__detail-heading[data-v-18d3ce6f] {
margin: calc(3 * var(--default-grid-baseline)) 0 0;
font-weight: bold;
}
.cn-logs-page__detail-json[data-v-18d3ce6f] {
margin: 0;
padding: calc(2 * var(--default-grid-baseline));
overflow-x: auto;
border-radius: var(--border-radius);
background-color: var(--color-background-dark);
font-family: monospace;
white-space: pre;
}
/* Same breakpoint + step-down as CnDetailPage, so the three page types stay in
sync on narrow viewports. */
@media (max-width: 768px) {
.cn-logs-page[data-v-18d3ce6f] {
padding: calc(3 * var(--default-grid-baseline));
}
}
.cn-settings-page[data-v-e98da622] {
display: flex;
flex-direction: column;
gap: 16px;
}
.cn-settings-page__actions[data-v-e98da622] {
display: flex;
justify-content: flex-end;
gap: 8px;
}
/*
* Tab strip for the orchestration shape (manifest-settings-
* orchestration REQ-MSO-5). Uses Nextcloud CSS variables only — no
* hex literals, no rgba overrides on the elements themselves.
*/
.cn-settings-page__tabs[data-v-e98da622] {
display: flex;
flex-wrap: wrap;
gap: 4px;
border-bottom: 1px solid var(--color-border);
padding-bottom: 0;
margin-bottom: 8px;
}
.cn-settings-page__tab[data-v-e98da622] {
background: transparent;
border: 0;
border-bottom: 3px solid transparent;
padding: 8px 16px;
margin: 0;
cursor: pointer;
color: var(--color-text-maxcontrast);
font-weight: normal;
border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out, border-color 0.1s ease-in-out;
}
.cn-settings-page__tab[data-v-e98da622]:hover,
.cn-settings-page__tab[data-v-e98da622]:focus-visible {
background-color: var(--color-background-hover);
color: var(--color-main-text);
outline: none;
}
.cn-settings-page__tab--active[data-v-e98da622] {
color: var(--color-primary-element);
border-bottom-color: var(--color-primary-element);
font-weight: bold;
}
@media (max-width: 768px) {
.cn-settings-page__tabs[data-v-e98da622] {
flex-direction: column;
gap: 0;
border-bottom: 0;
}
.cn-settings-page__tab[data-v-e98da622] {
border-bottom: 1px solid var(--color-border);
border-radius: 0;
text-align: left;
}
.cn-settings-page__tab--active[data-v-e98da622] {
border-bottom-width: 1px;
background-color: var(--color-background-hover);
}
}
.cn-settings-page__fields[data-v-e98da622] {
display: flex;
flex-direction: column;
gap: 12px;
}
.cn-settings-page__field[data-v-e98da622] {
display: flex;
flex-direction: column;
gap: 4px;
}
.cn-settings-page__field-help[data-v-e98da622] {
color: var(--color-text-maxcontrast);
}
.cn-settings-page__save-bar[data-v-e98da622] {
display: flex;
gap: 8px;
margin-top: 16px;
}
.cn-settings-page__error[data-v-e98da622] {
color: var(--color-error);
background: var(--color-error-light, var(--color-background-hover));
padding: 8px 12px;
border-radius: var(--border-radius);
}
.cn-chat-page[data-v-22f50a62] {
display: flex;
flex-direction: column;
gap: 16px;
height: 100%;
min-height: 480px;
}
.cn-chat-page__actions[data-v-22f50a62] {
display: flex;
justify-content: flex-end;
gap: 8px;
}
.cn-chat-page__iframe[data-v-22f50a62] {
flex: 1 1 auto;
width: 100%;
min-height: 480px;
border: 1px solid var(--color-border);
border-radius: var(--border-radius-large);
background: var(--color-main-background);
}
.cn-chat-page__placeholder[data-v-22f50a62] {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
min-height: 240px;
}
.cn-files-page[data-v-1c4cfd47] {
display: flex;
flex-direction: column;
gap: 16px;
}
.cn-files-page__actions[data-v-1c4cfd47] {
display: flex;
justify-content: flex-end;
gap: 8px;
}
.cn-files-page__loading[data-v-1c4cfd47],
.cn-files-page__empty[data-v-1c4cfd47],
.cn-files-page__error[data-v-1c4cfd47] {
display: flex;
align-items: center;
justify-content: center;
min-height: 240px;
}
.cn-map-page[data-v-3df70f5e] {
display: flex;
flex-direction: column;
height: 100%;
}
.cn-map-page__filters[data-v-3df70f5e] {
padding: 16px;
border-bottom: 1px solid var(--color-border);
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
.cn-map-page__body[data-v-3df70f5e] {
flex: 1;
position: relative;
min-height: 400px;
}
.cn-wiki-tree-node[data-v-698d9900] {
list-style: none;
margin: 0;
padding: 0;
}
.cn-wiki-tree-node__button[data-v-698d9900] {
display: block;
width: 100%;
text-align: left;
background: transparent;
border: 0;
color: var(--color-main-text);
padding: 6px 8px;
border-radius: var(--border-radius);
cursor: pointer;
}
.cn-wiki-tree-node__button[data-v-698d9900]:hover,
.cn-wiki-tree-node__button[data-v-698d9900]:focus-visible {
background: var(--color-background-hover);
outline: none;
}
.cn-wiki-tree-node__children[data-v-698d9900] {
list-style: none;
margin: 0;
padding-left: 16px;
}
.cn-wiki-page[data-v-25a3d3cf] {
display: flex;
gap: 24px;
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}
.cn-wiki-page__sidebar[data-v-25a3d3cf] {
flex: 0 0 240px;
border-right: 1px solid var(--color-border);
padding-right: 16px;
}
.cn-wiki-page__tree[data-v-25a3d3cf] {
list-style: none;
margin: 0;
padding: 0;
}
.cn-wiki-page__main[data-v-25a3d3cf] {
flex: 1 1 auto;
min-width: 0;
}
.cn-wiki-page__header[data-v-25a3d3cf] {
margin-bottom: 16px;
}
.cn-wiki-page__title[data-v-25a3d3cf] {
font-size: 1.6em;
margin: 0;
color: var(--color-main-text);
}
.cn-wiki-page__body[data-v-25a3d3cf] {
line-height: 1.7;
color: var(--color-main-text);
}
.cn-wiki-page__body[data-v-25a3d3cf] h1,
.cn-wiki-page__body[data-v-25a3d3cf] h2,
.cn-wiki-page__body[data-v-25a3d3cf] h3 {
color: var(--color-main-text);
margin-top: 1.4em;
margin-bottom: 0.5em;
}
.cn-wiki-page__body[data-v-25a3d3cf] p {
margin: 0 0 1em;
}
.cn-wiki-page__body[data-v-25a3d3cf] code {
background: var(--color-background-dark);
padding: 2px 6px;
border-radius: var(--border-radius);
font-family: var(--font-face-monospace, monospace);
font-size: 0.9em;
}
.cn-wiki-page__body[data-v-25a3d3cf] pre {
background: var(--color-background-dark);
padding: 12px;
border-radius: var(--border-radius);
overflow-x: auto;
}
.cn-wiki-page__body[data-v-25a3d3cf] pre code {
background: transparent;
padding: 0;
}
.cn-wiki-page__body[data-v-25a3d3cf] blockquote {
border-left: 3px solid var(--color-border);
padding-left: 12px;
color: var(--color-text-lighter);
margin: 0 0 1em;
}
.cn-wiki-page__body[data-v-25a3d3cf] table {
border-collapse: collapse;
margin: 0 0 1em;
}
.cn-wiki-page__body[data-v-25a3d3cf] th,
.cn-wiki-page__body[data-v-25a3d3cf] td {
border: 1px solid var(--color-border);
padding: 6px 10px;
}
.cn-wiki-page--has-sidebar .cn-wiki-page__main[data-v-25a3d3cf] {
padding-left: 8px;
}
.cn-unknown-widget[data-v-240cf479] {
display: flex;
align-items: center;
gap: 8px;
min-height: 48px;
padding: 12px;
border: 1px dashed var(--color-border-dark);
border-radius: var(--border-radius-large, 12px);
background: var(--color-background-hover);
color: var(--color-text-maxcontrast);
}
.cn-unknown-widget__icon[data-v-240cf479] {
flex: 0 0 auto;
color: var(--color-warning, var(--color-text-maxcontrast));
}
.cn-unknown-widget__text[data-v-240cf479] {
display: flex;
flex-direction: column;
min-width: 0;
}
.cn-unknown-widget__title[data-v-240cf479] {
font-weight: 600;
}
.cn-unknown-widget__key[data-v-240cf479] {
font-family: monospace;
font-size: 0.85em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cn-widget-grid {
width: 100%;
}
.cn-widget-grid--editing {
min-height: 120px;
}
.cn-widget-grid--editing .grid-stack {
background: transparent;
}
.cn-widget-grid--editing .grid-stack-item-content {
overflow: hidden;
background: var(--color-main-background);
}
.cn-widget-grid--editing .grid-stack-placeholder > .placeholder-content {
background: var(--color-primary-element-light);
border: 2px dashed var(--color-primary-element);
border-radius: var(--border-radius-large);
}
/* NcDialog supplies the padding and the heading (via `name`); this div keeps only
the body's own column layout. */
.cn-page-config[data-v-9e9a9cf8] {
display: flex;
flex-direction: column;
gap: 12px;
}
.cn-page-config__subtitle[data-v-9e9a9cf8] {
margin: 0;
font-size: 1em;
font-weight: 600;
}
.cn-page-config__tabs[data-v-9e9a9cf8] {
display: flex;
gap: 4px;
flex-wrap: wrap;
border-bottom: 1px solid var(--color-border);
padding-bottom: 8px;
}
.cn-page-config__section[data-v-9e9a9cf8] {
display: flex;
flex-direction: column;
gap: 20px;
min-height: 220px;
max-height: 55vh;
overflow-y: auto;
/* room so the scrollbar + each field's floating notch-label don't clip */
padding: 4px 4px 0;
}
/* One control + its description. The column layout keeps the hint directly under
the input and the 20px section gap above keeps a following field's floating
notch-label from overlapping the previous control. */
.cn-field[data-v-9e9a9cf8] {
display: flex;
flex-direction: column;
gap: 4px;
}
.cn-field--section[data-v-9e9a9cf8] {
gap: 2px;
}
.cn-field__label[data-v-9e9a9cf8] {
font-weight: 500;
}
.cn-field__hint[data-v-9e9a9cf8] {
margin: 0;
font-size: 0.8em;
line-height: 1.3;
color: var(--color-text-maxcontrast);
}
.cn-page-config__row[data-v-9e9a9cf8] {
display: flex;
gap: 16px;
align-items: flex-start;
}
.cn-page-config__row[data-v-9e9a9cf8] > * {
flex: 1;
min-width: 0;
}
.cn-page-config__field[data-v-9e9a9cf8] {
min-width: 200px;
}
.cn-page-config__col-transform[data-v-9e9a9cf8] {
display: grid;
grid-template-columns: 120px 1fr 1fr;
gap: 8px;
align-items: center;
}
.cn-page-config__col-name[data-v-9e9a9cf8] {
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cn-page-config__hint[data-v-9e9a9cf8] {
color: var(--color-text-maxcontrast);
}
.cn-page-config__json[data-v-9e9a9cf8] {
display: flex;
flex-direction: column;
gap: 4px;
}
.cn-page-config__json-label[data-v-9e9a9cf8] {
font-weight: 600;
}
.cn-page-config__json-input[data-v-9e9a9cf8] {
width: 100%;
font-family: monospace;
font-size: 0.85em;
border-radius: var(--border-radius);
border: 2px solid var(--color-border-dark);
background-color: var(--color-main-background);
color: var(--color-main-text);
padding: 6px 8px;
}
.cn-page-config__json-input--error[data-v-9e9a9cf8] {
border-color: var(--color-error);
}
.cn-page-config__json-error[data-v-9e9a9cf8] {
color: var(--color-error);
font-size: 0.85em;
}
/* The footer row is NcDialog's `#actions` slot now. The page id still sits in it,
pushed away from the Done button. */
.cn-page-config__id[data-v-9e9a9cf8] {
margin-inline-end: auto;
font-size: 0.85em;
color: var(--color-text-maxcontrast);
}
.cn-page-renderer {
display: contents;
}
/*
* Toggle-clearance padding lives PER-COMPONENT on each page's HEADER
* element (CnPageHeader, CnDashboardPage, CnDetailPage,
* CnFeaturesAndRoadmapView, etc.). Earlier attempts at an abstract
* fix here — first via `.cn-page-renderer > *` (PR #355, lost to
* scoped-style specificity + shorthand overrides), then via a
* `.cn-page-renderer__viewport` wrapper (PR #359, narrowed body
* content unintentionally) — were rejected in favour of per-header
* rules so body content keeps its full width.
*
* Custom pages MUST add `padding-inline-start: 56px` to their HEADER
* element to clear the navigation toggle. See `docs/getting-started.md`.
*/
/*
* Hook class applied when the current page's manifest entry has
* `sidebar.show: false`. The library does not ship visual rules
* here — consumer apps with style-driven sidebar layouts (e.g. CSS
* grid where the host shell sibling sidebar is a grid track) can
* target this class to collapse / hide the sibling element.
*
* The programmatic counterpart is the `cnPageSidebarVisible`
* inject — `CnAppRoot` reads it to gate ``.
*/
.cn-page-renderer--no-sidebar {
/* intentionally empty — consumer-styled */
}
/* Builder empty-state: keep the edit button top-right (mirrors a page
header's actions area) above a centred empty prompt. */
.cn-page-renderer__empty {
padding-inline-start: 56px;
}
.cn-page-renderer__empty-actions {
display: flex;
justify-content: flex-end;
padding: 8px 8px 0;
}
/*
* The legacy `icon-*` classes in Nextcloud render a background-image
* with a hardcoded dark fill, so they stay grey when an entry becomes
* active (text turns white against the primary-element background).
* Force the icon to white in the active state to match the label.
* Only applies when the icon is provided via the `icon` prop (CSS
* class) — items using a `` MDI component already
* inherit `currentColor`.
*/
.app-navigation-entry.active .app-navigation-entry-icon[class*="icon-"] {
filter: brightness(0) invert(1);
}
/*
* Footer-section items (section: "footer") render in NcAppNavigation's
* #footer slot, outside the scroll container, so they stay visible above
* the settings foldout regardless of menu length. (The interim
* `pinned`-prop approach kept them inside the scrollable list, where
* `margin-top: auto` only bottom-pins while the list does not overflow —
* long menus showed Documentation / Features & roadmap mid-scroll.)
* The only resets list chrome and aligns with the 16px icon inset
* of the main list; NC's own footer layout does the rest.
*
* As a direct `> ul` child of `.app-navigation__content`, NC's scoped rule
* makes it a shrinkable, scrollable flex item (`overflow: hidden auto;
* flex: 0 1 auto`). With a couple of footer entries that let the list be
* squeezed a few pixels below its content and grow an unwanted scrollbar,
* even on a short menu with plenty of room. Footer entries are few and must
* always show in full, so opt out of shrinking and scrolling here.
*/
.cn-app-nav__footer-list {
list-style: none;
margin: 0;
padding: 0;
flex-shrink: 0 !important;
overflow: visible !important;
}
/*
* Align the settings foldout's items with the main/footer list items,
* whose icons sit at a 16px inset. The foldout's items live in a bare
* inside NcAppNavigationSettings' panel (`#app-settings`, padding
* 3px), so without this they start ~5px further left and the icon
* column looks ragged. (The native settings-toggle button sits ~1px
* left of the 16px baseline, but NC owns that with an !important
* shorthand — a sub-pixel difference we leave to the native component.)
*/
.cn-app-nav__settings-list {
list-style: none;
margin: 0;
padding-inline-start: 5px;
}
.cn-app-loading {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 100%;
background: var(--color-main-background);
color: var(--color-main-text);
}
.cn-app-loading__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: calc(2 * var(--default-grid-baseline));
}
.cn-app-loading__logo {
max-width: 96px;
max-height: 96px;
}
.cn-app-loading__message {
margin: 0;
color: var(--color-text-maxcontrast);
font-size: var(--default-font-size);
}
.cn-dependency-missing {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 100%;
background: var(--color-main-background);
color: var(--color-main-text);
}
.cn-dependency-missing__inner {
max-width: 600px;
padding: calc(4 * var(--default-grid-baseline));
}
.cn-dependency-missing__heading {
margin: 0 0 calc(2 * var(--default-grid-baseline));
font-size: 1.5em;
}
.cn-dependency-missing__intro {
margin: 0 0 calc(3 * var(--default-grid-baseline));
color: var(--color-text-maxcontrast);
}
.cn-dependency-missing__list {
margin: 0;
padding: 0;
list-style: none;
}
.cn-dependency-missing__item {
display: flex;
align-items: center;
justify-content: space-between;
padding: calc(2 * var(--default-grid-baseline)) 0;
border-bottom: 1px solid var(--color-border);
}
.cn-dependency-missing__item:last-child {
border-bottom: 0;
}
.cn-dependency-missing__item-name {
font-weight: bold;
}
.cn-dependency-missing__item-link {
color: var(--color-primary-element);
text-decoration: underline;
}
.cn-dependency-missing__item-action {
display: flex;
align-items: center;
gap: calc(2 * var(--default-grid-baseline));
flex-wrap: wrap;
justify-content: flex-end;
}
.cn-dependency-missing__item-error {
color: var(--color-error);
}
.cn-dependency-missing__item-ask-admin {
color: var(--color-text-maxcontrast);
text-align: right;
}
/* ⚠️ THE SELECTOR IS DOUBLED ON PURPOSE — `.x.x` is not a typo.
*
* `!important` is not enough here, and this was measured. Every app that bundles
* this library also ships its CSS entry, which contains its own
* `.cn-ai-floating-button { … !important }` block. On a Nextcloud page the
* companion shares the DOM with those apps: on the Euro-Office editor the page
* carried stylesheets injected by decidesk, openconnector, openregister and
* spreed as well as hermiq. Between two rules of EQUAL specificity that are both
* `!important`, the LAST one injected wins — and load order across four
* independent apps is not something this component can control.
*
* Measured symptom: the hex rendered 52x60 (the old size) with the new 26x30
* rule present and losing, because another app's copy of the library CSS was
* injected later.
*
* Doubling the class raises specificity (0,2,0 vs 0,1,0) so this rule wins on
* merit rather than on ordering, whichever app's stylesheet lands last. */
.cn-ai-floating-button.cn-ai-floating-button {
/* !important blocks defeat NC's default button styles + the older
bundled CSS rule that webpack ships alongside this one. */
position: fixed !important;
z-index: 9000 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
/* 52:60 ≈ √3:2 — the exact ratio that makes every side of the pointy-top
hexagon polygon below equal length. The RATIO is the part that must not
drift: change both numbers together or the hexagon stops being
equilateral while still rendering, which is the failure nobody notices.
⚠️ THE SIZE IS LOAD-BEARING FOR THE WINDOW'S POINTER. CnAiChatPanel aims
its triangle at this hex by arithmetic (see the inset block below and
`--cn-ai-pointer-offset` there). Resize here without redoing that and the
arrow points at empty space. */
width: 52px !important;
height: 60px !important;
/* ⚠️ min-height/min-width MUST be cleared, or `height` is a suggestion.
Nextcloud's own button styling sets `min-height: 34px`, which silently
won against an explicit `height` — measured: the hex rendered 26x34, the
right width and the wrong height, which is exactly the shape that breaks
the √3:2 hexagon while looking almost correct. */
min-width: 0 !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: #ffffff;
cursor: pointer;
transition: transform 0.15s ease, filter 0.15s ease;
}
/* The hex shape itself — equilateral pointy-top per Conduction brand rules.
All six sides equal length only when the parent's width:height is √3:2 (set above).
Doubled selector for the same reason as the block above: another consumer's
copy of this library's CSS is `!important` too, and may be injected later. */
.cn-ai-floating-button__hex.cn-ai-floating-button__hex {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
background: #21468B !important; /* Conduction Cobalt — identity.conduction.nl/colors */
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
border-radius: 0 !important;
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
transition: background 0.15s ease;
}
.cn-ai-floating-button__icon {
color: #ffffff;
line-height: 1;
}
.cn-ai-floating-button:hover .cn-ai-floating-button__hex,
.cn-ai-floating-button:focus-visible .cn-ai-floating-button__hex {
background: #1a3670; /* Conduction Cobalt, darkened for hover */
}
.cn-ai-floating-button:hover,
.cn-ai-floating-button:focus-visible {
transform: scale(1.08);
}
.cn-ai-floating-button:focus-visible {
outline: none;
}
.cn-ai-floating-button:focus-visible .cn-ai-floating-button__hex {
filter:
drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25))
drop-shadow(0 0 0 3px rgba(67, 118, 252, 0.5));
}
/* Position variants — the insets are DERIVED, not chosen.
*
* The hex's point must touch the tip of the window's pointer, so the two are
* solved together:
*
* vertical window sits 108px up; its triangle hangs 12px below it, so the
* tip is at 108 - 12 = 96px. The hex is 60px tall, so its bottom
* must be at 96 - 60 = 36px for its point to meet that tip.
* horizontal the triangle's centre is 74px in (window inset 44 + pointer
* offset 19 + half of its 22px width). The hex is 52px wide, so its
* inset must be 74 - 26 = 48px for the two centres to line up.
*
* ⚠️ Change the hex size, the window inset, or `--cn-ai-pointer-offset` in
* CnAiChatPanel, and all of these numbers move together. They are one geometry
* expressed in two files.
*
* Selectors doubled for the same reason as the base rule above — a consumer's
* bundled copy of this library's CSS carries the old 24px insets and may be
* injected later. Measured: the hex sat at 24px with these rules present and
* losing. */
.cn-ai-floating-button--bottom-right.cn-ai-floating-button--bottom-right {
right: 48px !important;
bottom: 36px !important;
}
.cn-ai-floating-button--bottom-left.cn-ai-floating-button--bottom-left {
bottom: 36px !important;
left: 48px !important;
}
.cn-ai-floating-button--top-right.cn-ai-floating-button--top-right {
top: 36px !important;
right: 48px !important;
}
.cn-ai-floating-button--top-left.cn-ai-floating-button--top-left {
top: 36px !important;
left: 48px !important;
}
/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
.cn-ai-floating-button,
.cn-ai-floating-button__hex {
transition: none;
}
.cn-ai-floating-button:hover,
.cn-ai-floating-button:focus-visible {
transform: none;
}
}
.cn-ai-message-list {
display: flex;
flex: 1;
flex-direction: column;
gap: 8px;
padding: 12px;
overflow-y: auto;
}
.cn-ai-message-list__empty {
display: flex;
flex: 1;
align-items: center;
justify-content: center;
}
/* Message item layout */
.cn-ai-message-list__item {
display: flex;
}
.cn-ai-message-list__item--user {
justify-content: flex-end;
}
.cn-ai-message-list__item--assistant {
justify-content: flex-start;
}
.cn-ai-message-list__item--system {
justify-content: center;
}
/* Bubbles */
.cn-ai-message-list__bubble {
max-width: 80%;
padding: 8px 12px;
border-radius: var(--border-radius-large, 12px);
word-break: break-word;
}
.cn-ai-message-list__bubble--user {
background: var(--color-primary-element);
color: var(--color-primary-element-text);
}
.cn-ai-message-list__bubble--assistant {
background: var(--color-background-hover);
color: var(--color-main-text);
}
.cn-ai-message-list__user-text {
white-space: pre-wrap;
}
.cn-ai-message-list__system-text {
padding: 4px 8px;
border-radius: var(--border-radius);
background: var(--color-background-dark);
color: var(--color-text-maxcontrast);
font-size: 0.85em;
}
/* Tool call entries */
.cn-ai-message-list__tool {
margin-top: 8px;
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
overflow: hidden;
}
.cn-ai-message-list__tool--error {
border-color: var(--color-error);
}
.cn-ai-message-list__tool-summary {
display: flex;
align-items: center;
gap: 4px;
width: 100%;
padding: 4px 8px;
border: none;
background: var(--color-background-hover);
color: var(--color-main-text);
font-size: 0.85em;
text-align: left;
cursor: pointer;
}
.cn-ai-message-list__tool--error .cn-ai-message-list__tool-summary {
background: var(--color-error-rgb, rgba(220, 53, 69, 0.1));
color: var(--color-error);
}
.cn-ai-message-list__tool-chevron {
transition: transform 0.15s ease;
}
.cn-ai-message-list__tool-chevron--open {
transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
.cn-ai-message-list__tool-chevron {
transition: none;
}
}
.cn-ai-message-list__tool-detail {
padding: 8px;
background: var(--color-main-background);
}
.cn-ai-message-list__tool-json {
margin: 0;
font-size: 0.8em;
white-space: pre-wrap;
word-break: break-all;
}
/* Thinking placeholder — animated dots */
.cn-ai-message-list__bubble--thinking {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--color-text-maxcontrast);
font-style: italic;
}
.cn-ai-message-list__thinking-text {
user-select: none;
}
.cn-ai-message-list__thinking-dots {
display: inline-flex;
gap: 2px;
margin-left: 2px;
}
.cn-ai-message-list__thinking-dot {
display: inline-block;
width: 5px;
height: 5px;
border-radius: 50%;
background: currentColor;
opacity: 0.3;
animation: cn-ai-thinking-bounce 1.2s ease-in-out infinite;
}
.cn-ai-message-list__thinking-dot:nth-child(2) {
animation-delay: 0.15s;
}
.cn-ai-message-list__thinking-dot:nth-child(3) {
animation-delay: 0.30s;
}
@keyframes cn-ai-thinking-bounce {
0%, 80%, 100% {
opacity: 0.3;
transform: translateY(0);
}
40% {
opacity: 1;
transform: translateY(-3px);
}
}
@media (prefers-reduced-motion: reduce) {
.cn-ai-message-list__thinking-dot {
animation: cn-ai-thinking-fade 1.4s ease-in-out infinite;
transform: none;
}
@keyframes cn-ai-thinking-fade {
0%, 100% { opacity: 0.3;
}
50% { opacity: 1;
}
}
}
.cn-ai-input {
display: flex;
flex-direction: column;
gap: 6px;
padding: 8px 12px;
border-top: 1px solid var(--color-border);
}
.cn-ai-input__error {
margin: 0;
}
.cn-ai-input__chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
}
.cn-ai-input__chip {
display: flex;
align-items: center;
gap: 4px;
max-width: 220px;
padding: 4px 8px;
border-radius: var(--border-radius-pill, 16px);
background: var(--color-background-hover);
font-size: 13px;
}
.cn-ai-input__chip-icon {
flex-shrink: 0;
opacity: 0.7;
}
.cn-ai-input__chip-name {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.cn-ai-input__chip-remove {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
padding: 0;
border: none;
background: transparent;
color: inherit;
cursor: pointer;
opacity: 0.7;
}
/* `:focus-visible` and `:disabled` are declared BEFORE the compound
`:hover:not(:disabled)` rule: stylelint's no-descending-specificity wants
lower-specificity selectors first, and `:hover:not(:disabled)` outranks
both. Ordering only — the cascade result is unchanged. */
.cn-ai-input__chip-remove:focus-visible {
opacity: 1;
}
.cn-ai-input__chip-remove:disabled {
cursor: not-allowed;
}
.cn-ai-input__chip-remove:hover:not(:disabled) {
opacity: 1;
}
.cn-ai-input__row {
display: flex;
gap: 8px;
align-items: flex-end;
}
.cn-ai-input__file-input {
display: none;
}
/* Mic matches the paperclip exactly — they are peers in the row, and any
difference in size or weight would read as one being the primary action. */
.cn-ai-input__mic-button {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
background: var(--color-main-background);
color: var(--color-main-text);
cursor: pointer;
}
/* Declared BEFORE the hover rule below, which is more specific
(`:hover:not(:disabled)`). Source order has to follow specificity here or the
cascade's outcome depends on which rule happens to be written last — the
thing `no-descending-specificity` exists to stop. */
.cn-ai-input__mic-button:disabled {
opacity: .5;
cursor: default;
}
.cn-ai-input__mic-button:hover:not(:disabled) {
background: var(--color-background-hover);
}
/* Recording is a STATE, not a hover: it stays visible while the user speaks and
looks away from the button. Error colour because it is the "something is
live" signal, and the icon fills in beside it — it does NOT swap to a
struck-through mic, which is what this comment used to describe and what made
a listening composer look muted. */
.cn-ai-input__mic-button--recording {
border-color: var(--color-error);
background: var(--color-error);
color: var(--color-primary-text, #fff);
}
/* 🔴 THE BLOCKED LOOK THE COMMENT ABOVE THE BUTTON ALREADY PROMISED.
`cn-ai-input__mic-button--blocked` was bound in the template and styled
NOWHERE, so a microphone that cannot run — an agent pinned to the private
engine while the speech service is down, or a browser with no recognition —
looked exactly like a working one until you hovered it for the tooltip. A
class set and never read is a comment, not a state.
⚠️ Muted rather than `disabled`, and NOT `pointer-events: none`. The button
deliberately keeps a live click handler: a natively disabled control
suppresses hover, so its `title` can never appear and it refuses without ever
saying why. It must stay clickable in order to explain itself. */
.cn-ai-input__mic-button--blocked {
opacity: .5;
cursor: not-allowed;
}
/* The conversation control sits beside the mic and matches it in weight —
neither is the primary action, and a bigger one would suggest the hands-free
mode is the normal way to use the composer rather than a deliberate choice. */
.cn-ai-input__converse-button {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
background: var(--color-main-background);
color: var(--color-main-text);
cursor: pointer;
}
.cn-ai-input__converse-button:disabled {
opacity: .5;
cursor: default;
}
.cn-ai-input__converse-button:hover:not(:disabled) {
background: var(--color-background-hover);
}
/* Primary rather than error colour: a live conversation is a mode the user is
in, not a recording warning — the microphone beside it carries that. */
.cn-ai-input__converse-button--active {
border-color: var(--color-primary-element);
background: var(--color-primary-element);
color: var(--color-primary-element-text, #fff);
}
.cn-ai-input__attach-button {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
background: var(--color-main-background);
color: var(--color-main-text);
cursor: pointer;
}
.cn-ai-input__attach-button:hover:not(:disabled) {
background: var(--color-background-hover);
}
/* stylelint-disable-next-line no-descending-specificity */
.cn-ai-input__attach-button:focus-visible {
outline: 2px solid var(--color-primary-element);
outline-offset: 2px;
}
/* stylelint-disable-next-line no-descending-specificity */
.cn-ai-input__attach-button:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.cn-ai-input__textarea {
flex: 1;
min-height: 36px;
max-height: calc(6 * 1.5em + 24px);
padding: 8px;
resize: none;
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
background: var(--color-main-background);
color: var(--color-main-text);
font-family: inherit;
font-size: inherit;
line-height: 1.5;
overflow-y: auto;
}
.cn-ai-input__textarea:focus {
outline: 2px solid var(--color-primary-element);
outline-offset: 0;
border-color: var(--color-primary-element);
}
.cn-ai-input__textarea:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.cn-ai-input__send-button {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
border: none;
border-radius: var(--border-radius);
background: var(--color-primary-element);
color: var(--color-primary-element-text);
cursor: pointer;
}
.cn-ai-input__send-button:hover:not(:disabled) {
background: var(--color-primary-element-hover, var(--color-primary-element));
}
/* stylelint-disable-next-line no-descending-specificity */
.cn-ai-input__send-button:focus-visible {
outline: 2px solid var(--color-primary-element);
outline-offset: 2px;
}
/* stylelint-disable-next-line no-descending-specificity */
.cn-ai-input__send-button:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.cn-ai-history-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.cn-ai-history-list__search {
padding: 0 16px;
}
.cn-ai-history-list__loading {
display: flex;
flex-direction: column;
gap: 12px;
align-items: center;
justify-content: center;
padding: 32px;
}
.cn-ai-history-list__items {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
list-style: none;
}
.cn-ai-history-list__item {
display: flex;
align-items: stretch;
border-bottom: 1px solid var(--color-border);
}
.cn-ai-history-list__item:last-child {
border-bottom: none;
}
.cn-ai-history-list__item--active .cn-ai-history-list__item-button {
background: var(--color-primary-element-light, rgba(var(--color-primary-rgb), 0.1));
}
/* stylelint-disable-next-line no-descending-specificity */
.cn-ai-history-list__item-button {
display: flex;
flex: 1;
flex-direction: column;
gap: 2px;
align-items: flex-start;
min-width: 0;
padding: 10px 16px;
border: none;
background: transparent;
color: var(--color-main-text);
text-align: left;
cursor: pointer;
}
.cn-ai-history-list__item-button:hover,
.cn-ai-history-list__item-button:focus-visible {
background: var(--color-background-hover);
outline: 2px solid var(--color-primary-element);
outline-offset: -2px;
}
.cn-ai-history-list__item-title {
overflow: hidden;
width: 100%;
font-weight: 500;
white-space: nowrap;
text-overflow: ellipsis;
}
.cn-ai-history-list__item-desc {
overflow: hidden;
width: 100%;
color: var(--color-text-maxcontrast);
font-size: 0.85em;
white-space: nowrap;
text-overflow: ellipsis;
}
.cn-ai-history-list__item-time {
font-size: 0.8em;
color: var(--color-text-maxcontrast);
}
.cn-ai-history-list__item-edit-btn {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 36px;
border: none;
background: transparent;
color: var(--color-text-maxcontrast);
cursor: pointer;
}
.cn-ai-history-list__item-edit-btn:hover,
.cn-ai-history-list__item-edit-btn:focus-visible {
color: var(--color-main-text);
background: var(--color-background-hover);
}
.cn-ai-history-list__edit {
display: flex;
flex: 1;
flex-direction: column;
gap: 8px;
padding: 10px 16px;
}
.cn-ai-history-list__edit-actions {
display: flex;
gap: 8px;
}
/* The window itself. Fixed, anchored to the same corner as the launcher hex,
and sized to sit comfortably on a laptop viewport without covering the
host application it is a guest on.
`!important` is deliberate and matches CnAiFloatingButton's reasoning: this
markup lands inside third-party apps whose stylesheets we do not control. */
.cn-ai-chat-window {
position: fixed !important;
z-index: 9001 !important; /* above the launcher hex (9000) */
display: flex !important;
flex-direction: column !important;
width: 380px;
max-width: calc(100vw - 32px);
height: 600px;
max-height: calc(100vh - 160px);
/* NOT `overflow: hidden` — the pointer below is drawn outside this box and
would be clipped away. The rounded corners are held by the titlebar and
input rows clipping their own ends instead. */
border: 1px solid var(--color-border, #d0d0d0);
border-radius: 12px;
background: var(--color-background-hover, #f5f5f5);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
/* ⚠️ THE POINTER IS AIMED AT THE HEX, and this number is the only thing
keeping it there. The hex is 36px wide at a 56px inset, so its centre is
56 + 18 = 74px from the viewport edge. The window sits at a 44px inset, so
the pointer's centre must be 74 - 44 = 30px in from the window's edge; the
triangle is 22px wide, so its leading edge is 30 - 11 = 19px.
Change the hex size, the hex inset, or the window inset and this is wrong
— the arrow points at empty space beside the button, which reads as a
rendering bug rather than a measurement one. */
--cn-ai-pointer-offset: 19px;
}
/* Anchored ABOVE the hex and inboard of it.
*
* The hex sits at a 56px inset (see CnAiFloatingButton) to clear the host
* application's own bottom-right chrome — an office editor puts a zoom control
* and a status bar exactly there. The window clears the hex itself: 56px inset
* + 30px tall + 14px for the pointer + breathing room = 108px.
*
* The pointer offset these lean on is declared with the rest of the window's
* own properties above, not repeated here — a second `.cn-ai-chat-window` block
* is a duplicate selector, and the two halves drift the moment someone edits the
* one they happen to find first. */
.cn-ai-chat-window--bottom-right {
right: 44px;
bottom: 108px;
}
.cn-ai-chat-window--bottom-left {
left: 44px;
bottom: 108px;
}
.cn-ai-chat-window--top-right {
top: 108px;
right: 44px;
}
.cn-ai-chat-window--top-left {
top: 108px;
left: 44px;
}
/* The pointer: a white triangle under the window, aimed at the hex, so the
window reads as speech FROM the launcher rather than as an unrelated panel
that happened to appear. Built from two stacked triangles — the lower one is
the border colour and sits 1px further down, which is what gives the visible
1px edge along the two diagonals. `overflow: hidden` on the window would clip
these, which is why the window does not use it. */
.cn-ai-chat-window--bottom-right::after,
.cn-ai-chat-window--bottom-left::after,
.cn-ai-chat-window--bottom-right::before,
.cn-ai-chat-window--bottom-left::before {
position: absolute;
top: 100%;
width: 0;
height: 0;
content: '';
border-right: 11px solid transparent;
border-left: 11px solid transparent;
}
/* Border layer, 1px lower and 1px wider than the fill. */
.cn-ai-chat-window--bottom-right::before,
.cn-ai-chat-window--bottom-left::before {
border-top: 12px solid var(--color-border, #d0d0d0);
}
/* Fill layer, in the titlebar's white so the pointer belongs to the chrome. */
.cn-ai-chat-window--bottom-right::after,
.cn-ai-chat-window--bottom-left::after {
margin-top: -1px;
border-top: 12px solid var(--color-main-background, #ffffff);
}
.cn-ai-chat-window--bottom-right::before,
.cn-ai-chat-window--bottom-right::after {
right: var(--cn-ai-pointer-offset);
}
.cn-ai-chat-window--bottom-left::before,
.cn-ai-chat-window--bottom-left::after {
left: var(--cn-ai-pointer-offset);
}
/* White titlebar over the light-grey body — the one contrast that tells a
guest window's chrome apart from its content. */
.cn-ai-chat-window__titlebar {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: 8px;
padding: 4px 8px;
border-bottom: 1px solid var(--color-border, #d0d0d0);
/* Clips its own top corners, since the window can no longer use
`overflow: hidden` (it would eat the pointer). */
border-radius: 11px 11px 0 0;
background: var(--color-main-background, #ffffff);
}
.cn-ai-chat-window__controls {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: 2px;
}
/* The agent's identity, after the controls. `min-width: 0` + ellipsis so a
long agent name shortens instead of pushing the controls off the edge. */
.cn-ai-chat-window__identity {
display: flex;
flex: 1 1 auto;
gap: 6px;
align-items: center;
min-width: 0;
}
.cn-ai-chat-window__identity-icon {
flex: 0 0 auto;
color: var(--color-primary-element, #21468b);
}
.cn-ai-chat-window__identity-name {
overflow: hidden;
font-weight: 600;
white-space: nowrap;
text-overflow: ellipsis;
}
.cn-ai-chat-window__body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-height: 0; /* allow flex children to shrink past their content size */
}
.cn-ai-chat-window__body--history {
overflow-y: auto;
padding: 8px;
}
.cn-ai-chat-window__messages {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding: 8px;
}
/* Approvals sit between the transcript and the composer: the last thing read
before the box you would otherwise type into, which is where a blocked
agent's request belongs. */
.cn-ai-chat-window__approvals {
display: flex;
flex-direction: column;
gap: 8px;
margin: 0;
padding: 8px 12px 0;
list-style: none;
}
.cn-ai-approval {
padding: 10px 12px;
border: 1px solid var(--color-border);
border-radius: var(--border-radius-large, 12px);
background: var(--color-main-background);
}
.cn-ai-approval__head {
display: flex;
align-items: center;
gap: 8px;
}
.cn-ai-approval__title {
flex: 1;
font-weight: 600;
overflow-wrap: anywhere;
}
/* The reach is the fact the decision rests on, so it reads as a label rather
than as part of the agent's prose. */
.cn-ai-approval__reach {
flex-shrink: 0;
padding: 1px 8px;
border-radius: 12px;
background: var(--color-background-dark);
font-size: 11px;
text-transform: uppercase;
letter-spacing: .04em;
}
.cn-ai-approval__reason {
margin: 6px 0 0;
color: var(--color-text-maxcontrast);
font-size: 13px;
}
.cn-ai-approval__actions {
display: flex;
gap: 8px;
margin-top: 10px;
}
.cn-ai-chat-window__input {
flex: 0 0 auto;
padding: 8px;
border-top: 1px solid var(--color-border, #d0d0d0);
/* Mirrors the titlebar: clips its own bottom corners. */
border-radius: 0 0 11px 11px;
background: var(--color-main-background, #ffffff);
}
/* ── The pop animation ──────────────────────────────────────────────────────
*
* Scale + fade, with `transform-origin` at the corner the hex sits under, so the
* window converges on the launcher. 0.14 rather than 0 as the start scale: a
* true zero briefly renders a 0x0 box that some engines treat as invisible for
* hit-testing, and the tiny non-zero keeps the transition interruptible if the
* user toggles the hex twice quickly.
*
* Leave is faster than enter (140ms vs 180ms) — dismissal should feel immediate,
* while appearance can afford to be seen. */
.cn-ai-chat-window-pop-bottom-right-enter-active,
.cn-ai-chat-window-pop-bottom-left-enter-active,
.cn-ai-chat-window-pop-top-right-enter-active,
.cn-ai-chat-window-pop-top-left-enter-active {
transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.2), opacity 0.14s ease-out;
}
.cn-ai-chat-window-pop-bottom-right-leave-active,
.cn-ai-chat-window-pop-bottom-left-leave-active,
.cn-ai-chat-window-pop-top-right-leave-active,
.cn-ai-chat-window-pop-top-left-leave-active {
transition: transform 0.14s ease-in, opacity 0.12s ease-in;
}
.cn-ai-chat-window-pop-bottom-right-enter,
.cn-ai-chat-window-pop-bottom-right-enter-from,
.cn-ai-chat-window-pop-bottom-right-leave-to {
transform: scale(0.14);
transform-origin: calc(100% - var(--cn-ai-pointer-offset) - 11px) 100%;
opacity: 0;
}
.cn-ai-chat-window-pop-bottom-left-enter,
.cn-ai-chat-window-pop-bottom-left-enter-from,
.cn-ai-chat-window-pop-bottom-left-leave-to {
transform: scale(0.14);
transform-origin: calc(var(--cn-ai-pointer-offset) + 11px) 100%;
opacity: 0;
}
.cn-ai-chat-window-pop-top-right-enter,
.cn-ai-chat-window-pop-top-right-enter-from,
.cn-ai-chat-window-pop-top-right-leave-to {
transform: scale(0.14);
transform-origin: calc(100% - var(--cn-ai-pointer-offset) - 11px) 0%;
opacity: 0;
}
.cn-ai-chat-window-pop-top-left-enter,
.cn-ai-chat-window-pop-top-left-enter-from,
.cn-ai-chat-window-pop-top-left-leave-to {
transform: scale(0.14);
transform-origin: calc(var(--cn-ai-pointer-offset) + 11px) 0%;
opacity: 0;
}
/* Someone who asked not to be moved gets the window without the flight. */
@media (prefers-reduced-motion: reduce) {
.cn-ai-chat-window-pop-bottom-right-enter-active,
.cn-ai-chat-window-pop-bottom-left-enter-active,
.cn-ai-chat-window-pop-top-right-enter-active,
.cn-ai-chat-window-pop-top-left-enter-active,
.cn-ai-chat-window-pop-bottom-right-leave-active,
.cn-ai-chat-window-pop-bottom-left-leave-active,
.cn-ai-chat-window-pop-top-right-leave-active,
.cn-ai-chat-window-pop-top-left-leave-active {
transition: opacity 0.1s linear;
}
.cn-ai-chat-window-pop-bottom-right-enter,
.cn-ai-chat-window-pop-bottom-left-enter,
.cn-ai-chat-window-pop-top-right-enter,
.cn-ai-chat-window-pop-top-left-enter,
.cn-ai-chat-window-pop-bottom-right-leave-to,
.cn-ai-chat-window-pop-bottom-left-leave-to,
.cn-ai-chat-window-pop-top-right-leave-to,
.cn-ai-chat-window-pop-top-left-leave-to {
transform: none;
}
}
/* Empty state: just the agent's name and the prompt. The agent picker and the
recent-sessions list used to live here and now live in the titlebar menus —
on a 380px window they filled the first screen before any message did. */
.cn-ai-chat-window__start {
display: flex;
flex-direction: column;
align-self: stretch;
gap: 16px;
width: 100%;
margin: 0 auto;
padding: 0 12px;
}
.cn-ai-companion {
/*
* display: contents removes this wrapper from the layout tree so the
* embedded NcAppSidebar inherits NcContent as its flex parent — required
* for the sidebar to slide in from the RIGHT edge. The FAB is itself
* position:fixed so it positions independently of the wrapper's box.
*
* !important is intentional: webpack pulls in BOTH the old (position:
* fixed) and new (display: contents) rules from the package's CJS and
* ESM builds; without !important the old rule wins the cascade and the
* sidebar renders at the left.
*/
display: contents !important;
position: static !important;
}
.cn-support-dialog__body[data-v-04246fe9] {
/* Bottom padding restores the breathing room the NcDialog actions slot
used to provide — the CTAs now live in the body, so without it the
bottom row sits flush against the dialog edge. */
padding: 0 4px 12px;
}
.cn-support-dialog__paragraph[data-v-04246fe9] {
margin: 0 0 8px 0;
line-height: 1.45;
color: var(--color-main-text);
}
.cn-support-dialog__link[data-v-04246fe9] {
color: var(--color-primary-element);
text-decoration: underline;
}
.cn-support-dialog__signature[data-v-04246fe9] {
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
margin-top: 4px;
}
.cn-support-dialog__avatar-link[data-v-04246fe9] {
flex: 0 0 auto;
display: inline-flex;
border-radius: 50%;
}
.cn-support-dialog__avatar[data-v-04246fe9] {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
display: block;
}
.cn-support-dialog__signature-text[data-v-04246fe9] {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
.cn-support-dialog__signature-name[data-v-04246fe9] {
font-family: 'Caveat', 'Brush Script MT', 'Lucida Handwriting', cursive;
font-size: 26px;
line-height: 1;
color: var(--color-main-text);
}
.cn-support-dialog__signature-title[data-v-04246fe9] {
font-size: 13px;
color: var(--color-text-maxcontrast);
}
.cn-support-dialog__actions[data-v-04246fe9] {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 8px;
row-gap: 8px;
align-items: stretch;
margin-top: 10px;
}
/* Normalise per-button margins so the grid gap is the only spacing —
NcButton ships its own margins that otherwise make the rows look uneven. */
.cn-support-dialog__actions[data-v-04246fe9] > * {
margin: 0;
width: 100%;
}
@media (max-width: 480px) {
.cn-support-dialog__actions[data-v-04246fe9] {
grid-template-columns: 1fr;
}
}
.cn-notif-prefs__intro[data-v-72cc0056] {
margin-bottom: 12px;
color: var(--color-text-maxcontrast);
}
.cn-notif-prefs__group[data-v-72cc0056] {
margin-bottom: 20px;
}
.cn-notif-prefs__group-title[data-v-72cc0056] {
margin: 8px 0 8px;
font-weight: bold;
}
.cn-notif-prefs__grid[data-v-72cc0056] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 8px;
}
.cn-notif-prefs__card[data-v-72cc0056] {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
padding: 12px;
border: 1px solid var(--color-border);
border-radius: var(--border-radius-large);
background-color: var(--color-background-hover);
}
.cn-tenant-badge[data-v-9e59eb26] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 8px;
border-radius: 12px;
background: var(--color-background-hover, rgba(127, 127, 127, 0.12));
color: var(--color-main-text, inherit);
font-size: 12px;
line-height: 1.25;
max-width: 220px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
cursor: default;
}
.cn-tenant-badge--md[data-v-9e59eb26] {
font-size: 14px;
padding: 4px 12px;
}
.cn-tenant-badge__icon[data-v-9e59eb26] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50%;
color: #fff;
font-size: 11px;
font-weight: 600;
flex: 0 0 auto;
}
.cn-tenant-badge--md .cn-tenant-badge__icon[data-v-9e59eb26] {
width: 22px;
height: 22px;
font-size: 12px;
}
.cn-tenant-badge__name[data-v-9e59eb26] {
overflow: hidden;
text-overflow: ellipsis;
}
.cn-app-root__capabilities-loading {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 100vh;
background: var(--color-main-background);
}
.cn-app-root__or-missing {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 100vh;
background: var(--color-main-background);
color: var(--color-main-text);
}
.cn-app-root__or-missing-action {
display: inline-block;
padding: calc(1.5 * var(--default-grid-baseline)) calc(3 * var(--default-grid-baseline));
border-radius: var(--border-radius);
background: var(--color-primary-element);
color: var(--color-primary-element-text);
text-decoration: none;
}
.cn-app-root__or-missing-action:hover,
.cn-app-root__or-missing-action:focus {
background: var(--color-primary-element-hover);
text-decoration: underline;
}
.cn-app-root__walkthrough-hint {
margin-bottom: 12px;
color: var(--color-text-maxcontrast);
}
.cn-app-root__or-missing-error {
margin: calc(2 * var(--default-grid-baseline)) 0 calc(1 * var(--default-grid-baseline));
color: var(--color-error);
}
.cn-app-root__or-missing-ask-admin {
color: var(--color-text-maxcontrast);
}
.cn-app-root__soft-dep {
margin: calc(2 * var(--default-grid-baseline));
}
.cn-app-root__soft-dep-body {
display: flex;
flex-direction: column;
gap: var(--default-grid-baseline);
}
.cn-app-root__soft-dep-actions {
display: flex;
align-items: center;
gap: calc(2 * var(--default-grid-baseline));
flex-wrap: wrap;
}
.cn-app-root__soft-dep-ask-admin {
color: var(--color-text-maxcontrast);
}
.cn-app-root__soft-dep-error {
margin: 0;
color: var(--color-error);
}
.cn-features-tab__grid[data-v-3737d32b] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
}
.cn-features-tab__card[data-v-3737d32b] {
display: flex;
flex-direction: column;
gap: 8px;
padding: 16px;
background: var(--color-main-background);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-large, 12px);
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.cn-features-tab__card[data-v-3737d32b]:hover {
border-color: var(--color-primary-element);
box-shadow: 0 2px 8px var(--color-box-shadow, rgba(0, 0, 0, 0.08));
}
.cn-features-tab__title[data-v-3737d32b] {
margin: 0;
font-size: 1.05em;
color: var(--color-main-text);
}
.cn-features-tab__summary[data-v-3737d32b] {
margin: 0;
color: var(--color-text-light);
font-size: 0.95em;
line-height: 1.4;
flex: 1;
}
.cn-features-tab__link[data-v-3737d32b] {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--color-primary-element);
text-decoration: none;
font-size: 0.9em;
margin-top: auto;
}
.cn-features-tab__link[data-v-3737d32b]:hover {
text-decoration: underline;
}
.cn-roadmap-item[data-v-601f9299] {
display: flex;
flex-direction: column;
gap: 8px;
padding: 16px;
/* Position anchor for the ::after overlay that expands the title link's
click area to the whole card. Inner anchors stay above the overlay
via z-index: 2 so the body's inline links still work. */
position: relative;
}
.cn-roadmap-item__title-link[data-v-601f9299]::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
border-radius: inherit;
}
.cn-roadmap-item__body[data-v-601f9299] a,
.cn-roadmap-item__labels[data-v-601f9299] {
position: relative;
z-index: 2;
}
.cn-roadmap-item__header[data-v-601f9299] {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 8px;
}
.cn-roadmap-item__avatar[data-v-601f9299] {
width: 24px;
height: 24px;
border-radius: 50%;
flex-shrink: 0;
object-fit: cover;
background: var(--color-background-darker);
}
.cn-roadmap-item__meta[data-v-601f9299] {
flex: 1;
}
.cn-roadmap-item__title-link[data-v-601f9299] {
display: block;
color: var(--color-main-text);
font-weight: 600;
text-decoration: none;
}
.cn-roadmap-item__title-link[data-v-601f9299]:hover {
color: var(--color-primary-element);
text-decoration: underline;
}
.cn-roadmap-item__submitter[data-v-601f9299] {
font-size: 0.85em;
color: var(--color-text-light);
}
.cn-roadmap-item__separator[data-v-601f9299] {
margin: 0 4px;
}
.cn-roadmap-item__reactions[data-v-601f9299] {
display: flex;
align-items: center;
gap: 4px;
color: var(--color-text-light);
}
.cn-roadmap-item__body[data-v-601f9299] {
color: var(--color-main-text);
font-size: 0.95em;
line-height: 1.4;
/* Cap the rendered markdown so cards stay roughly feature-card-sized.
Full body is reachable via the title link to the GitHub issue. */
max-height: 8.4em;
overflow: hidden;
position: relative;
mask-image: linear-gradient(to bottom, black 70%, transparent);
-webkit-mask-image: linear-gradient(to bottom, black 70%, transparent);
}
.cn-roadmap-item__body[data-v-601f9299] p { margin: 4px 0;
}
.cn-roadmap-item__body[data-v-601f9299] h1,
.cn-roadmap-item__body[data-v-601f9299] h2,
.cn-roadmap-item__body[data-v-601f9299] h3 {
font-size: 1em;
margin: 4px 0;
font-weight: 600;
}
.cn-roadmap-item__body[data-v-601f9299] pre { background: var(--color-background-hover); padding: 8px; border-radius: 4px; overflow-x: auto;
}
.cn-roadmap-item__body[data-v-601f9299] code { background: var(--color-background-hover); padding: 2px 4px; border-radius: 3px;
}
.cn-roadmap-item__labels[data-v-601f9299] {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 8px;
}
.cn-roadmap-item__label-chip[data-v-601f9299] {
padding: 2px 8px;
border-radius: 10px;
font-size: 0.8em;
}
.cn-roadmap-tab__grid[data-v-b4d3b662] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
}
.cn-roadmap-tab__card[data-v-b4d3b662] {
background: var(--color-main-background);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-large, 12px);
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.cn-roadmap-tab__card[data-v-b4d3b662]:hover {
border-color: var(--color-primary-element);
box-shadow: 0 2px 8px var(--color-box-shadow, rgba(0, 0, 0, 0.08));
}
.cn-roadmap-tab__loading[data-v-b4d3b662] {
display: flex;
justify-content: center;
padding: 32px;
}
.cn-features-and-roadmap-sidebar[data-v-377904ef] {
background: var(--color-main-background);
border-left: 1px solid var(--color-border);
height: 100%;
overflow-y: auto;
}
.cn-features-and-roadmap-sidebar__header[data-v-377904ef] {
padding: 16px;
border-bottom: 1px solid var(--color-border);
background: var(--color-background-hover);
}
.cn-features-and-roadmap-sidebar__name[data-v-377904ef] {
margin: 0;
font-size: 1.1em;
color: var(--color-main-text);
}
.cn-features-and-roadmap-sidebar__subname[data-v-377904ef] {
margin: 4px 0 0 0;
font-size: 0.85em;
color: var(--color-text-light);
}
.cn-features-and-roadmap-sidebar__section[data-v-377904ef] {
padding: 16px;
border-bottom: 1px solid var(--color-border);
}
.cn-features-and-roadmap-sidebar__section[data-v-377904ef]:last-child {
border-bottom: 0;
}
.cn-features-and-roadmap-sidebar__section-title[data-v-377904ef] {
margin: 0 0 8px 0;
font-size: 1em;
color: var(--color-main-text);
}
.cn-features-and-roadmap-sidebar__section-body[data-v-377904ef] {
margin: 0 0 12px 0;
font-size: 0.95em;
line-height: 1.5;
color: var(--color-text-light);
}
.cn-features-and-roadmap-sidebar__link[data-v-377904ef] {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--color-primary-element);
text-decoration: none;
font-size: 0.95em;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
font-family: inherit;
}
.cn-features-and-roadmap-sidebar__link[data-v-377904ef]:hover {
text-decoration: underline;
}
.cn-features-and-roadmap-view[data-v-7c44400f] {
max-width: 1200px;
margin: 0 auto;
padding: 24px 16px;
}
.cn-features-and-roadmap-view__header[data-v-7c44400f] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 24px;
flex-wrap: wrap;
/* Clear the Nextcloud navigation toggle button (44px wide, absolutely
positioned at the left edge of .app-content) plus 12px breathing
room. Only the HEADER shifts right — the panel below keeps full width. */
padding-inline-start: 56px;
}
.cn-features-and-roadmap-view__title[data-v-7c44400f] {
font-size: 1.4em;
margin: 0;
color: var(--color-main-text);
}
.cn-features-and-roadmap-view__actions[data-v-7c44400f] {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
.cn-features-and-roadmap-view__panel[data-v-7c44400f] {
min-height: 320px;
}
/* Underline the inline docs URL so it reads as a link inside the note
body — NcNoteCard's default link styling drops the underline by
inheriting from the host theme. */
.cn-features-and-roadmap-view__docs-note[data-v-7c44400f] a {
color: var(--color-primary-element);
text-decoration: underline;
}
.cn-features-and-roadmap-view__docs-note[data-v-7c44400f] a:hover {
text-decoration: underline;
opacity: 0.85;
}
.cn-visibility-rules__hint[data-v-dcb6ed98] {
color: var(--color-text-maxcontrast);
margin: 0 0 8px;
}
.cn-visibility-rules__list[data-v-dcb6ed98] {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.cn-visibility-rules__rule[data-v-dcb6ed98] {
padding: 12px;
background: var(--color-background-dark);
border-radius: var(--border-radius);
}
.cn-visibility-rules__rule-header[data-v-dcb6ed98] {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.cn-visibility-rules__conditions[data-v-dcb6ed98] {
list-style: none;
margin: 0 0 8px;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.cn-visibility-rules__condition[data-v-dcb6ed98] {
display: flex;
align-items: center;
gap: 8px;
}
.cn-visibility-rules__condition-kind[data-v-dcb6ed98] {
font-weight: 500;
}
.cn-visibility-rules__condition-summary[data-v-dcb6ed98] {
flex: 1;
font-size: 12px;
color: var(--color-text-maxcontrast);
}
.cn-visibility-rules__condition-empty[data-v-dcb6ed98] {
color: var(--color-text-maxcontrast);
font-size: 12px;
}
.cn-visibility-rules__empty[data-v-dcb6ed98] {
color: var(--color-text-maxcontrast);
margin: 0;
}
.cn-visibility-rules__form[data-v-dcb6ed98] {
border-top: 1px solid var(--color-border);
padding-top: 12px;
}
.cn-visibility-rules__form h3[data-v-dcb6ed98] {
margin: 0 0 12px;
}
.cn-visibility-rules__field[data-v-dcb6ed98] {
margin-bottom: 12px;
}
.cn-visibility-rules__actions[data-v-dcb6ed98] {
display: flex;
justify-content: flex-end;
}
.cn-tabs__nav[data-v-5c1a056f] {
display: flex;
gap: 4px;
border-bottom: 1px solid var(--color-border);
overflow-x: auto;
}
.cn-tabs__nav-item[data-v-5c1a056f] {
background: transparent;
border: none;
border-bottom: 2px solid transparent;
border-radius: 0;
color: var(--color-text-maxcontrast);
cursor: pointer;
font-weight: normal;
padding: 8px 12px;
white-space: nowrap;
}
.cn-tabs__nav--justified .cn-tabs__nav-item[data-v-5c1a056f] {
flex: 1 1 0;
}
.cn-tabs__nav-item[data-v-5c1a056f]:hover,
.cn-tabs__nav-item[data-v-5c1a056f]:focus-visible {
background-color: var(--color-background-hover);
color: var(--color-main-text);
}
.cn-tabs__nav-item[disabled][data-v-5c1a056f] {
cursor: default;
opacity: 0.5;
}
.cn-tabs__nav-item[disabled][data-v-5c1a056f]:hover {
background-color: transparent;
color: var(--color-text-maxcontrast);
}
.cn-tabs__nav-item--active[data-v-5c1a056f] {
border-bottom-color: var(--color-primary-element);
color: var(--color-main-text);
font-weight: bold;
}
.cn-tabs__content[data-v-5c1a056f] {
padding-top: 12px;
}
.cn-tabs--card .cn-tabs__content[data-v-5c1a056f] {
border: 1px solid var(--color-border);
border-top: none;
padding: 12px;
}
.cn-ai-agent-picker {
width: 100%;
}
.cn-ai-agent-picker__error {
margin: 0;
color: var(--color-text-maxcontrast);
font-size: 0.85em;
}
.cn-ai-recent-sessions {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
}
.cn-ai-recent-sessions__title {
margin: 0;
color: var(--color-text-maxcontrast);
font-size: 0.85em;
font-weight: bold;
}
.cn-ai-recent-sessions__list {
display: flex;
flex-direction: column;
gap: 4px;
margin: 0;
padding: 0;
list-style: none;
}
.cn-ai-recent-sessions__card {
display: flex;
flex-direction: column;
gap: 2px;
width: 100%;
padding: 8px 12px;
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
background: var(--color-main-background);
color: var(--color-main-text);
text-align: left;
cursor: pointer;
}
.cn-ai-recent-sessions__card:hover,
.cn-ai-recent-sessions__card:focus-visible {
background: var(--color-background-hover);
outline: 2px solid var(--color-primary-element);
outline-offset: -2px;
}
.cn-ai-recent-sessions__card--active {
background: var(--color-primary-element-light, rgba(var(--color-primary-rgb), 0.1));
}
.cn-ai-recent-sessions__card-title {
overflow: hidden;
font-weight: 500;
white-space: nowrap;
text-overflow: ellipsis;
}
.cn-ai-recent-sessions__card-desc {
overflow: hidden;
color: var(--color-text-maxcontrast);
font-size: 0.85em;
white-space: nowrap;
text-overflow: ellipsis;
}
.cn-ai-recent-sessions__view-all {
padding: 4px 0;
border: none;
background: transparent;
color: var(--color-primary-element);
text-align: left;
cursor: pointer;
}
.cn-ai-recent-sessions__view-all:hover,
.cn-ai-recent-sessions__view-all:focus-visible {
text-decoration: underline;
}
.cn-ai-history-dialog__loading {
display: flex;
flex-direction: column;
gap: 12px;
align-items: center;
justify-content: center;
padding: 32px;
}