Surfaces used in the TYPO3 Backend, for internal usage only.
.surface-natural-demo {
display: grid;
color: var(--typo3-component-color);
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
border-radius: var(--typo3-component-border-radius);
}
.surface-natural-demo + .surface-natural-demo {
margin-top: var(--typo3-spacing);
}
.surface-natural-demo-item {
display: flex;
padding: 2rem;
min-height: 200px;
align-items: center;
justify-content: center;
}
container-lowest
container-low
container-base
container-high
container-highest
.surface-color-container {
display: grid;
color: var(--typo3-component-color);
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
gap: 1rem;
}
.surface-color-demo {
overflow: hidden;
border-radius: .5rem;
box-shadow: var(--typo3-shadow-2);
}
.surface-color-demo-item {
display: flex;
padding: 1rem;
min-height: 6rem;
}
.surface-color-demo-code {
padding: 1rem;
font-size: 0.75rem;
background-color: var(--typo3-surface-container-base);
margin: 0 !important;
}
{color}
container-{color}
--typo3-surface-{color}
--typo3-surface-{color}-text
--typo3-surface-container-{color}
--typo3-surface-container-{color}-text