65 lines
1.7 KiB
SCSS
65 lines
1.7 KiB
SCSS
/* layout-form-row.styles.scss */
|
|
|
|
/**
|
|
* Surface tokens (light/dark)
|
|
* - --imex-form-surface: the main section background (circled area)
|
|
* - --imex-form-surface-head: slightly different strip for the Card header
|
|
* - --imex-form-surface-border: border color for the card
|
|
*
|
|
* Update the dark selector(s) to match whatever you use (body class, data-theme, etc).
|
|
*/
|
|
|
|
:root {
|
|
--imex-form-surface: #fafafa; /* subtle contrast vs white page */
|
|
--imex-form-surface-head: #f5f5f5; /* header strip */
|
|
--imex-form-surface-border: #d9d9d9; /* matches AntD-ish border */
|
|
}
|
|
|
|
/* Pick the selector that matches your app and remove the rest */
|
|
html[data-theme="dark"] {
|
|
--imex-form-surface: rgba(255, 255, 255, 0.01); /* subtle lift off page bg */
|
|
--imex-form-surface-head: rgba(255, 255, 255, 0.06); /* slightly stronger for header strip */
|
|
--imex-form-surface-border: rgba(5, 5, 5, 0.12);
|
|
}
|
|
|
|
.imex-form-row {
|
|
width: 100%;
|
|
|
|
/* Match old Divider title typography */
|
|
.ant-card-head-title {
|
|
font-weight: 500;
|
|
font-size: var(--ant-font-size-lg);
|
|
line-height: 1.2; /* optional, makes it feel like a section header */
|
|
}
|
|
|
|
/* Make the whole section read as its own surface */
|
|
&.ant-card {
|
|
background: var(--imex-form-surface);
|
|
border-color: var(--imex-form-surface-border);
|
|
}
|
|
|
|
.ant-card-head {
|
|
background: var(--imex-form-surface-head);
|
|
border-bottom-color: var(--imex-form-surface-border);
|
|
}
|
|
|
|
.ant-card-body {
|
|
background: var(--imex-form-surface);
|
|
}
|
|
|
|
/* Optional: slightly tighter on phones */
|
|
@media (max-width: 575px) {
|
|
.ant-card-head {
|
|
padding-inline: 12px;
|
|
}
|
|
.ant-card-body {
|
|
padding: 12px;
|
|
}
|
|
}
|
|
|
|
/* Common form nicety */
|
|
.ant-col > * {
|
|
width: 100%;
|
|
}
|
|
}
|