3TE/src/pages/configuration/WasteConfigurationPage.css

128 lines
2.3 KiB
CSS

.waste-config-page {
max-width: 1280px;
margin: 0 auto;
}
.page-title {
font-size: 2.5rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: var(--spacing-2xl);
}
.page-content {
display: flex;
flex-direction: column;
gap: var(--spacing-xl);
}
.form-card {
max-width: 800px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-lg);
}
.form-actions {
display: flex;
gap: var(--spacing-md);
margin-top: var(--spacing-lg);
}
.table-card {
margin-top: var(--spacing-xl);
}
.table-actions {
display: flex;
gap: var(--spacing-sm);
}
.form-section {
margin-top: var(--spacing-xl);
padding-top: var(--spacing-xl);
border-top: 1px solid var(--border);
}
.form-section-title {
font-size: 1.25rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--spacing-lg);
}
.form-subsection {
margin-bottom: var(--spacing-xl);
}
.form-subsection-title {
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--spacing-md);
}
.checkbox-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: var(--spacing-sm);
margin-top: var(--spacing-md);
}
.checkbox-item {
display: flex;
align-items: center;
gap: var(--spacing-sm);
cursor: pointer;
padding: var(--spacing-xs);
border-radius: 4px;
transition: background-color 200ms ease-in-out;
}
.checkbox-item:hover {
background-color: var(--background-secondary);
}
.checkbox-item input[type="checkbox"] {
width: 20px;
height: 20px;
cursor: pointer;
accent-color: var(--primary-green);
}
.form-help-text {
color: var(--text-secondary);
font-size: 0.9rem;
margin-bottom: var(--spacing-md);
}
.regulators-list {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
margin-top: var(--spacing-md);
}
.regulator-association-item {
display: grid;
grid-template-columns: 2fr 1fr auto;
gap: var(--spacing-md);
align-items: end;
padding: var(--spacing-md);
background-color: var(--background-secondary);
border-radius: 8px;
border: 1px solid var(--border);
}
.regulators-summary {
margin-top: var(--spacing-md);
padding: var(--spacing-md);
background-color: var(--background);
border-radius: 8px;
border: 1px solid var(--border);
text-align: right;
color: var(--text-primary);
}