| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465 |
- .root {
- background-color: var(--sl-color-bg-surface);
- padding: 0.5rem calc(0.5rem + 3px);
- border-radius: 0.25rem;
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- gap: 1rem;
- align-self: flex-start;
- [data-section="content"] {
- pre {
- margin-bottom: 0.5rem;
- line-height: 1.5;
- font-size: 0.75rem;
- white-space: pre-wrap;
- word-break: break-word;
- &:last-child {
- margin-bottom: 0;
- }
- span {
- margin-right: 0.25rem;
- &:last-child {
- margin-right: 0;
- }
- }
- span[data-color="red"] {
- color: var(--sl-color-red);
- }
- span[data-color="dimmed"] {
- color: var(--sl-color-text-dimmed);
- }
- span[data-marker="label"] {
- text-transform: uppercase;
- letter-spacing: -0.5px;
- }
- span[data-separator] {
- margin-right: 0.375rem;
- }
- }
- }
- &[data-expanded="true"] {
- [data-section="content"] {
- display: block;
- }
- }
- &[data-expanded="false"] {
- [data-section="content"] {
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 7;
- overflow: hidden;
- }
- }
- button {
- flex: 0 0 auto;
- padding: 2px 0;
- font-size: 0.75rem;
- }
- }
|