Fix summary style
Problem: the `<summary>` element had a broken bottom margin on content warnings, and isn't obvious that it's not just text. Solution: Fix the margin and used a dashed border to indicate that the content can be expanded. I think this is more intuitive than no border, and I think the dashed line draws parallels with "cut outs" that might make expansion intuitive (?), but either way I think it's better than the previous design.
This commit is contained in:
parent
1b6c559115
commit
2eb983719c
|
@ -448,11 +448,12 @@ progress {
|
|||
|
||||
summary {
|
||||
padding: var(--milli);
|
||||
margin-top: var(--whole);
|
||||
margin: var(--whole) 0;
|
||||
cursor: pointer;
|
||||
background: var(--bg);
|
||||
border-radius: var(--common-radius);
|
||||
list-style-type: "+ ";
|
||||
border: var(--pico) dashed var(--fg-status);
|
||||
}
|
||||
|
||||
details[open] > summary {
|
||||
|
|
Loading…
Reference in New Issue