syntaxbullet/minabot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Center each habit layout on its completion action

Browse Source
This commit is contained in:
syntaxbullet
2026-09-05 08:06:16 +02:00
parent 3945998fa8
commit b832b5734e
6 changed files with 87 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
styles/design-system.css
View File

@@ -1588,3 +1588,37 @@
.ds-habit-filters .ds-button[aria-pressed="true"] { border-color: Highlight; }
.ds-counter-input { border-color: ButtonText; }
}
/* Each goal puts its completion control before secondary history. */
.ds-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.ds-habit-list > .ds-goal { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 24px 0; }
.ds-goal-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ds-goal-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ds-goal-title h3 { overflow-wrap: anywhere; min-width: 0; }
.ds-goal-title label { cursor: pointer; }
.ds-goal-title > .ds-checkbox { flex: 0 0 44px; justify-content: center; gap: 0; }
.ds-goal--manual .ds-goal-title:has(input:checked) h3 { color: var(--ds-secondary); }
.ds-goal-schedule { @apply type-small; color: var(--ds-secondary); margin-top: 4px; }
.ds-goal--manual .ds-goal-schedule { padding-left: 56px; }
.ds-goal-count { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.ds-goal-count .ds-counter { padding: 6px; gap: 8px; background: var(--ds-surface); }
.ds-goal-count .ds-counter-input { @apply type-title; width: 5ch; min-height: 52px; background: var(--ds-paper); }
.ds-goal-count .ds-counter .ds-button { min-height: 48px; min-width: 48px; }
.ds-goal-unit { @apply type-body; color: var(--ds-secondary); overflow-wrap: anywhere; }
.ds-habit-list .ds-goal .ds-habit-history { align-self: flex-end; margin-top: 8px; }
.ds-habit-list .ds-goal .ds-habit-history:has([aria-expanded="true"]) { align-self: stretch; }
.ds-goal-task-progress { @apply type-small; color: var(--ds-secondary); margin: 8px 0; }
.ds-routine-items { list-style: none; padding: 0; margin: 0; }
.ds-routine-items .ds-editable-task:first-child { border-top: 0; }
.ds-routine-items .ds-editable-task-row { padding: 4px 8px; gap: 12px; }
.ds-routine-items .ds-editable-task-row > .ds-checkbox { min-height: 48px; }
.ds-routine-items .ds-editable-task-row:has(input:checked) .ds-checkbox-label { color: var(--ds-secondary); text-decoration: line-through; text-decoration-color: var(--ds-rule); }
.ds-routine-items .ds-editable-task-row:hover { background: var(--ds-surface); }
.ds-goal-tasks .ds-task-add-action { padding-bottom: 0; }
.ds-habit-starter-options { margin-top: 0; }
@media (max-width: 700px) {
.ds-goal-heading { gap: 8px; }
.ds-goal-count { gap: 8px; }
.ds-goal-count .ds-counter { gap: 4px; }
.ds-habit-list .ds-goal .ds-habit-history { align-self: flex-start; }
}