pages/input-config/input-config.component.scss

0001 /* input-config.component.scss */
0002
0003 /* Use a contrasting background for the card itself vs. the header */
0004 .config-card {
0005   background-color: var(--mat-sys-surface);         /* Use a slightly different surface than the header */
0006   color: var(--mat-sys-on-surface);
0007   margin: 16px 0;
0008   border-radius: 8px;                                 /* Rounded corners */
0009   overflow: hidden;                                   /* Ensure content doesn’t bleed outside rounded corners */
0010   box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);         /* Subtle elevation */
0011   font-family: 'Roboto', sans-serif;                /* Consistent typography */
0012 }
0013
0014 /* Card header: separate background and proper padding */
0015 .config-card mat-card-title {
0016   background-color: var(--mat-sys-surface-container); /* A container color that differs from the card content */
0017   padding: 16px;
0018   font-family: inherit;                              /* Inherit from .config-card */
0019   font-size: 1.25rem;
0020   font-weight: 500;
0021   line-height: 1.2;
0022 }
0023
0024 /* Card content: ensure consistent padding and typography */
0025 .config-card mat-card-content {
0026   padding: 16px;
0027   font-family: inherit;
0028   font-size: 1rem;
0029   line-height: 1.5;
0030 }
0031
0032 .section {
0033   margin-bottom: 16px;
0034 }
0035
0036 .api-url {
0037   margin-top: 16px;
0038 }
0039
0040 /* Remove unneeded utility class; full-width is now handled by Material's layout */
0041 .full-width {
0042   width: 100%;
0043 }
0044
0045 .action-buttons {
0046   margin: 24px 0;
0047   text-align: center;
0048
0049 }
0050
0051 .upload-row {
0052   display: flex;
0053   align-items: center;
0054   gap: 12px;
0055   margin-top: 8px;
0056   flex-wrap: wrap;
0057 }
0058
0059 .upload-filename {
0060   display: inline-flex;
0061   align-items: center;
0062   gap: 4px;
0063   font-size: 0.9rem;
0064   color: var(--mat-sys-on-surface-variant, inherit);
0065   word-break: break-all;
0066 }
0067
0068 .details-accordion {
0069   margin-top: 24px;
0070 }
0071
0072 .details-table {
0073   width: 100%;
0074   border-collapse: collapse;
0075
0076   th, td {
0077     padding: 8px;
0078     text-align: left;
0079     border-bottom: 1px solid var(--mat-sys-outline);
0080   }
0081 }
0082
0083 .subsection {
0084   margin: 1rem 0;
0085   padding: 1rem;
0086   border: 1px solid #ddd;
0087   border-radius: 4px;
0088 }
0089
0090 .subsection h3 {
0091   margin-top: 0;
0092 }
0093
0094 .conversion-groups {
0095   display: flex;
0096   flex-wrap: wrap;
0097   gap: 8px 16px;
0098 }
0099
0100 .conversion-group-checkbox {
0101   display: inline-flex;
0102   align-items: center;
0103   gap: 6px;
0104   cursor: pointer;
0105   white-space: nowrap;
0106
0107   input {
0108     cursor: pointer;
0109   }
0110 }