Update App.css for Input Number Component Styling

- Added padding to input fields within the input-number-cal class for improved usability.
- Adjusted z-index and color properties for better visual hierarchy and clarity in the input-number-cal-highlight class.
- Ensured consistent background styling for input fields in the input-number-cal-expr-input class to enhance user experience.
This commit is contained in:
Tom Butcher 2026-09-01 19:58:44 +01:00
parent 451787debd
commit 415aa0cd9d

View File

@ -754,6 +754,10 @@ body {
position: relative;
}
.input-number-cal input {
padding: 4px 12px;
}
.input-number-cal-highlight {
position: absolute;
display: flex;
@ -761,8 +765,8 @@ body {
overflow: hidden;
white-space: pre;
pointer-events: none;
z-index: 0;
color: var(--color-text);
z-index: 2;
color: color-mix(in srgb, var(--color-text) 85%, transparent);
}
.input-number-cal-operator {
@ -777,16 +781,18 @@ body {
.input-number-cal-expr-input.ant-input-affix-wrapper {
position: relative;
z-index: 1;
background: transparent !important;
}
.input-number-cal-expr-input.ant-input,
.input-number-cal-expr-input .ant-input {
background: transparent !important;
.input-number-cal-expr-input.ant-input-affix-wrapper .ant-input,
.input-number-cal-expr-input.ant-input-outlined:not(.ant-input-affix-wrapper) {
color: transparent !important;
caret-color: var(--color-text);
}
.input-number-cal-expr-input.ant-input-affix-wrapper .ant-input {
background: transparent !important;
}
.input-number-cal .ant-input-suffix {
margin-right: 28px;
}