op-packages/luci-theme-carbon/styles/05-luci-structure.css

/* ==========================================================================
   5. LuCI page structure — maps, sections, value rows
   ========================================================================== */

#view > h2,
.cbi-map > h2,
#maincontent > h2,
#view > .cbi-map > h2,
h2[name="content"] {
	margin: 8px 0 6px;
	font-size: 26px;
	font-weight: 750;
	letter-spacing: -.022em;
}

.cbi-map-descr,
.cbi-section-descr,
.cbi-tab-descr {
	margin: 0 0 18px;
	color: var(--cb-text-2);
	font-size: 13.5px;
	line-height: 1.55;
	max-width: 760px;
}
.cbi-section-descr:empty, .cbi-map-descr:empty { display: none; }

.cbi-map { margin-bottom: 20px; }
.cbi-map > .cbi-section:first-of-type { margin-top: 10px; }

.cbi-section,
.cbi-tblsection {
	margin: 0 0 22px;
}
.cbi-section > h3,
.cbi-section > legend,
.cbi-tblsection > h3 {
	margin: 0 0 10px;
	padding: 0 4px;
	font-size: 11px;
	font-weight: 700;
	color: var(--cb-text-2);
	text-transform: uppercase;
	letter-spacing: .09em;
}
.cbi-section > h3:empty { display: none; }

.cbi-section-node,
.cbi-section > .table,
.cbi-section > .cbi-section-table,
.cbi-tblsection > .table,
#view > .table,
#view > .cbi-section > div:not([class]) > .table {
	background: var(--cb-card);
	border-radius: var(--cb-radius);
	box-shadow: var(--cb-shadow);
}
.cbi-section-node {
	padding: 4px 20px;
}
.cbi-section-node-tabbed { padding-top: 14px; }
.cbi-section-node:empty { display: none; }

.cbi-section > div:not([class]):not([id]) > .cbi-value:first-child { margin-top: 0; }

/* value rows */
.cbi-value {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 20px;
	padding: 14px 0;
	border-top: 1px solid var(--cb-sep);
}
.cbi-section-node > .cbi-value:first-child,
.cbi-section-node > [data-tab] > .cbi-value:first-child,
.cbi-section-node > div > .cbi-value:first-child,
[data-tab-title] > .cbi-value:first-of-type { border-top: 0; }

.cbi-value-title,
.cbi-value label.cbi-value-title {
	flex: 0 0 210px;
	padding: 0;
	color: var(--cb-text);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.4;
	text-align: left;
	word-break: break-word;
}
.cbi-value-field {
	flex: 1 1 280px;
	min-width: 0;
	line-height: 1.5;
}
.cbi-value > .cbi-section,
.cbi-value > .cbi-tblsection { width: 100%; }
.cbi-value-field > .cbi-checkbox,
.cbi-value-field > div > .cbi-radio { min-height: 32px; display: inline-flex; align-items: center; }
/* inline button groups inside a field (e.g. System → Local time) */
.cbi-value-field .control-group {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 8px;
}
.cbi-value-field .control-group > * { margin: 0 !important; }

/* multi-line fields: keep the label at the top of the box */
.cbi-value[data-widget="CBI.TextValue"],
.cbi-value:has(> .cbi-value-field textarea) { align-items: flex-start; }
.cbi-value[data-widget="CBI.TextValue"] > .cbi-value-title,
.cbi-value:has(> .cbi-value-field textarea) > .cbi-value-title { padding-top: 7px; }

/* firewall zone forwarding cell: src ⇒ dest side by side (mirrors bootstrap) */
.zone-forwards { display: flex; align-items: center; gap: 8px; min-width: 10em; }
.zone-forwards > * { flex: 1 1 45%; padding: 1px; }
.zone-forwards > span { flex: 0 0 auto; color: var(--cb-text-3); text-align: center; }
.zone-forwards .zone-src,
.zone-forwards .zone-dest { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }

/* zero-width text gives the switch a centred baseline for row alignment */
.cbi-checkbox::before { content: "\200b"; width: 0; line-height: 32px; overflow: hidden; }

.cbi-value-description {
	position: relative;
	margin: 6px 0 0;
	padding-left: 0;
	color: var(--cb-text-2);
	font-size: 12.5px;
	line-height: 1.5;
}
.cbi-value-description:empty { display: none; }

.cbi-value-helpicon img { display: none; }

.cbi-section-error {
	margin-bottom: 14px;
	padding: 10px 14px;
	border-radius: var(--cb-radius-md);
	background: var(--cb-red-t);
	color: var(--cb-red);
}
.cbi-section-error ul { margin: 0; padding-left: 1.2em; }

.cbi-section-create {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 12px 0 0;
}
.cbi-section-create > * { margin: 0 !important; }
.cbi-section-create > div > input { margin: 0; }

.cbi-section-remove { text-align: right; padding: 10px 0 4px; }
.cbi-section-remove:empty { display: none; }

.cbi-optionals { padding: 10px 0; }

.cbi-title-ref { color: var(--cb-accent); }
.cbi-title-ref::after { content: " →"; }

/* page actions bar (Save & Apply) */
.cbi-page-actions {
	position: sticky;
	z-index: 100;
	bottom: 12px;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 8px;
	margin: 22px 0 0;
	padding: 10px 12px;
	border-radius: var(--cb-radius);
	background: var(--cb-popover);
	box-shadow: var(--cb-shadow-pop);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.cbi-page-actions {
		-webkit-backdrop-filter: saturate(180%) blur(20px);
		backdrop-filter: saturate(180%) blur(20px);
	}
}
.cbi-page-actions:empty { display: none; }
.cbi-page-actions > * { margin: 0 !important; }
.cbi-page-actions > :not([method="post"]):not(.cbi-button-apply):not(.cbi-button-negative):not(.cbi-button-save):not(.cbi-button-reset) {
	margin-right: auto !important;
}
.cbi-page-actions.control-group { justify-content: flex-start; }