fix(settings): give Settings pills room and the outlined buttons' size
Theme and Timeline design pills sat 1px under their help text and, in Relaxed, in a dark well at 12px/32px beside 13px/37px outlined buttons, which read as off-centre. Under a help line they now sit 16px below it, like the scheme choices, and in Settings take the buttons' type, height and a hairline tray. Co-Authored-By: Claude Opus 5.5 <[email protected]>
This commit is contained in:
co-authored by
Claude Opus 5.5
parent
3e3759b1eb
commit
9c22a85134
@@ -1896,6 +1896,31 @@ textarea {
|
||||
flex-wrap: wrap;
|
||||
margin-top: 16px;
|
||||
}
|
||||
/* Pills under an explanation get the scheme choices' breathing room; flush
|
||||
against the text they read as part of the sentence. */
|
||||
.settings-group .help + .segmented {
|
||||
margin-top: 16px;
|
||||
}
|
||||
/* In Settings the pills sit beside outlined buttons and selects, so they take
|
||||
those controls' type and height, and in Relaxed a hairline tray rather than
|
||||
the dark well the Checklist's sort pills use: a well among outlines reads as
|
||||
text floating in a hole. */
|
||||
.settings-group .segmented button {
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
padding: 7px 12px;
|
||||
min-height: 0;
|
||||
}
|
||||
:root[data-interface="relaxed"] .settings-group .segmented {
|
||||
background: transparent;
|
||||
border: 1px solid var(--color-hairline);
|
||||
border-radius: 8px;
|
||||
}
|
||||
:root[data-interface="relaxed"] .settings-group .segmented button {
|
||||
padding: 4px 12px;
|
||||
min-height: 0;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.scheme-option {
|
||||
border: 1px solid var(--color-hairline);
|
||||
padding: 10px 14px;
|
||||
|
||||
Reference in New Issue
Block a user