packages/esl-website/src/esl-events-demo/log-area/log-area.less
@import (reference) '../../common/variables.less'; .esl-d-log-area { touch-action: none; display: flex; flex-direction: column; width: 100%; height: 100%; min-width: 200px; min-height: 300px; position: relative; overflow: auto; padding: 1rem; color: @body-fg; background-color: @body-bg; border: @body-fg 1px solid; border-radius: 4px; box-shadow: 0 2px 4px 0 fadein(@body-fg, 0.3); user-select: none; > .log-item { transition: opacity 0.5s linear; margin-bottom: 5px; } > .log-item.removed { opacity: 0; } // Placeholder &[placeholder]::before { content: attr(placeholder); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: @body-fg; font-size: 2rem; opacity: 0.4; pointer-events: none; }}