Eliseu Amaro
75837af412
A browser will use Unicode glyphs from other font families if the glyph in question is not present for the current typeface. This leads to unnerving situations, whereby setting content through pseudo-selectors will cause text to misalign. And no, line-height won't make a difference in this case. This happens because fonts have different heights. Another reason may reside on CSS3 having pseudo selectors but not really having a proper spec for them to begin with.
61 lines
1.3 KiB
CSS
61 lines
1.3 KiB
CSS
.section-settings {
|
|
background: var(--background-card);
|
|
border: 1px solid var(--border);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.section-settings, .section-settings-details {
|
|
border-radius: .6rem;
|
|
box-sizing: border-box;
|
|
margin-bottom: .6rem;
|
|
padding: .6rem;
|
|
}
|
|
|
|
.section-settings-details {
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
.section-settings-details-title {
|
|
display: block;
|
|
}
|
|
|
|
.section-settings-details[open] {
|
|
border-left: 2px solid var(--foreground);
|
|
}
|
|
|
|
.section-settings-details[open] > summary:first-child {
|
|
margin-bottom: var(--s);
|
|
}
|
|
|
|
.section-settings-details summary + form {
|
|
padding-left: var(--s);
|
|
}
|
|
|
|
.section-settings hr {
|
|
margin-bottom: .6rem;
|
|
margin-top: .6rem;
|
|
}
|
|
|
|
.section-settings-details summary em:first-letter, .section-settings-details summary h3:first-letter {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.section-settings-details[open] .set-nav li:last-of-type {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.section-settings-details summary:after {
|
|
content: "\1F817";
|
|
float: right;
|
|
}
|
|
|
|
.section-settings-details[open] summary:after {
|
|
animation: fadeOut 200ms cubic-bezier(0, 0.55, 0.45, 1);
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.section-settings-details:not([open]) summary:after {
|
|
animation: fadeIn 200ms cubic-bezier(0, 0.55, 0.45, 1);
|
|
transform: initial;
|
|
}
|