frontend_nyla/src/components/UiComponents/OerebSection/OerebSection.module.css

187 lines
3.7 KiB
CSS

/* ÖREB Section Styles */
.oerebSection {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--color-border, #e5e7eb);
}
.oerebHeader {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
padding: 0.5rem 0;
margin-bottom: 0.75rem;
transition: opacity 0.2s;
}
.oerebHeader:hover {
opacity: 0.8;
}
.oerebHeader .subSectionTitle {
margin: 0;
display: flex;
align-items: center;
color: var(--color-primary, #3b82f6);
font-size: 1rem;
font-weight: 600;
}
.badge {
margin-left: 0.5rem;
padding: 0.125rem 0.5rem;
background-color: var(--color-primary, #3b82f6);
color: white;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
}
.expandButton {
background: none;
border: none;
cursor: pointer;
padding: 0.25rem;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-secondary, #6b7280);
transition: color 0.2s;
}
.expandButton:hover {
color: var(--color-text, #111827);
}
.oerebContent {
display: flex;
flex-direction: column;
gap: 1rem;
}
.oerebExtractLink {
margin-bottom: 0.5rem;
}
.oerebLink {
display: inline-flex;
align-items: center;
padding: 0.75rem 1rem;
background: linear-gradient(135deg, var(--color-primary, #3b82f6) 0%, var(--color-primary-dark, #2563eb) 100%);
color: white;
text-decoration: none;
border-radius: 8px;
font-weight: 500;
transition: all 0.2s;
box-shadow: 0 4px 6px rgba(59, 130, 246, 0.3);
border: none;
cursor: pointer;
font-family: inherit;
font-size: inherit;
width: 100%;
justify-content: center;
}
.oerebLink:hover {
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(59, 130, 246, 0.4);
}
.oerebLink:active {
transform: translateY(0);
}
.restrictionsList {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.restrictionItem {
padding: 1rem;
background: linear-gradient(135deg, rgba(249, 250, 251, 0.8) 0%, rgba(243, 244, 246, 0.8) 100%);
backdrop-filter: blur(10px);
border: 1px solid var(--color-border, #e5e7eb);
border-left: 3px solid var(--color-primary, #3b82f6);
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.restrictionHeader {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
}
.restrictionTheme {
font-weight: 600;
color: var(--color-text, #111827);
font-size: 1rem;
}
.restrictionStatus {
padding: 0.25rem 0.5rem;
background: linear-gradient(135deg, rgba(209, 250, 229, 0.8) 0%, rgba(167, 243, 208, 0.8) 100%);
color: var(--color-success-dark, #065f46);
border-radius: 4px;
font-size: 0.75rem;
font-weight: 500;
backdrop-filter: blur(5px);
}
.restrictionType {
display: flex;
gap: 0.5rem;
margin-bottom: 0.5rem;
font-size: 0.875rem;
}
.restrictionInfo {
margin-top: 0.5rem;
padding-top: 0.5rem;
border-top: 1px solid var(--color-border, #e5e7eb);
font-size: 0.875rem;
color: var(--color-text, #111827);
line-height: 1.5;
}
.restrictionDocuments {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.5rem;
padding-top: 0.5rem;
border-top: 1px solid var(--color-border, #e5e7eb);
font-size: 0.875rem;
}
.documentLink {
color: var(--color-primary, #3b82f6);
text-decoration: none;
transition: color 0.2s;
}
.documentLink:hover {
color: var(--color-primary-dark, #2563eb);
text-decoration: underline;
}
.noRestrictions {
padding: 1rem;
text-align: center;
color: var(--color-text-secondary, #6b7280);
font-style: italic;
}
.oerebFooter {
margin-top: 0.5rem;
padding-top: 0.5rem;
border-top: 1px solid var(--color-border, #e5e7eb);
}
.lastUpdated {
font-size: 0.75rem;
color: var(--color-text-secondary, #6b7280);
}