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

Refactor HabitColorPicker to use HABIT_COLOR_CHOICES, update styles and tests

Browse Source 
- Replaced HABIT_PALETTES with HABIT_COLOR_CHOICES in HabitColorPicker component and related tests.
- Adjusted the layout and styles of the color picker for improved usability.
- Updated tests to reflect changes in color selection logic.
- Modified WorkspacePanel and SettingRow components to allow optional eyebrow and description props.
- Enhanced accessibility tests for calendar navigation.
- Updated calendar model to include a 1-month view option.
- Refined styles across various components for consistency and improved responsiveness.
This commit is contained in:
syntaxbullet
2026-09-08 15:42:47 +02:00
parent 4d719afd07
commit 833d5673eb
24 changed files with 175 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
styles/design-system.css
View File

@@ -1298,22 +1298,22 @@
.ds-legend-scale { flex-wrap: wrap; }
/* Editing patterns use the same open layout, rules, and neutral controls. */
.ds-color-picker { border: 0; border-top: 1px solid var(--ds-rule); padding: 20px 0 0; margin: 26px 0; min-width: 0; }
.ds-color-picker legend { padding: 0 12px 0 0; @apply type-ui-heading; }
.ds-color-picker { border: 0; padding: 0; margin: 0; min-width: 0; }
.ds-color-picker legend { padding: 0; margin-bottom: 8px; @apply type-ui-heading; }
.ds-color-picker > .ds-footnote { margin-top: 0 !important; }
.ds-color-palettes { display: flex; flex-wrap: wrap; gap: 20px 28px; margin: 20px 0; }
.ds-color-palette > span { @apply type-small; color: var(--ds-secondary); }
.ds-color-swatches { display: flex; gap: 4px; margin-top: 8px; }
.ds-color-swatches button { display: grid; place-items: center; width: 44px; min-width: 44px; min-height: 44px; padding: 4px; border: 1px solid transparent; background: transparent; }
.ds-color-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ds-color-swatches .ds-color-custom-toggle { width: auto; padding-inline: 8px; color: var(--ds-ink); @apply type-small; }
.ds-color-custom-toggle[aria-expanded="true"] { background: var(--ds-surface); }
.ds-color-swatches button { display: grid; place-items: center; width: 32px; min-width: 32px; min-height: 32px; padding: 3px; border: 1px solid transparent; background: transparent; }
.ds-color-swatches button[aria-pressed="true"] { border-color: var(--ds-ink); }
.ds-color-swatches button > span { display: grid; place-content: center; height: 28px; width: 28px; color: var(--ds-paper); @apply type-body; }
.ds-custom-color { display: flex; flex-wrap: wrap; gap: 16px; align-items: start; }
.ds-color-swatches button > span { display: grid; place-content: center; height: 24px; width: 24px; color: var(--ds-paper); @apply type-body; }
.ds-custom-color { display: flex; flex-wrap: wrap; gap: 12px; align-items: start; margin-top: 12px; }
.ds-custom-color .ds-field { margin-bottom: 0; }
.ds-custom-color .ds-field:last-child { width: 180px; }
.ds-custom-color input[type="color"] { width: 80px; height: 44px; padding: 5px; cursor: pointer; }
.ds-color-live-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 22px; @apply type-small; }
.ds-color-live-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; @apply type-small; }
.ds-color-preview-shades { display: flex; gap: 4px; }
.ds-color-preview-shades > span { width: 18px; height: 18px; border: 1px solid var(--ds-rule); }
.ds-color-preview-shades > span { width: 12px; height: 12px; border: 1px solid var(--ds-rule); }
.ds-edit-layout {
display: grid;
grid-template-columns: 280px minmax(0, 1fr);
@@ -1503,18 +1503,18 @@
.ds-utility-row .ds-button[aria-expanded="true"] { color: var(--ds-ink); background: var(--ds-paper); }
.ds-panel-description { margin-top: 12px !important; color: var(--ds-secondary); max-width: 52ch; }
.ds-panel-close { flex: 0 0 44px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--ds-rule); }
.ds-setting-row { display: grid; grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.6fr); gap: 48px; padding: 28px 0; border-top: 1px solid var(--ds-rule); }
.ds-setting-row { display: grid; grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.6fr); gap: 24px; padding: 20px 0; border-top: 1px solid var(--ds-rule); }
.ds-setting-row:last-of-type { padding-bottom: 0; }
.ds-setting-heading h3 { @apply type-ui-heading; }
.ds-setting-heading > div { display: grid; gap: 12px; margin-top: 10px; max-width: 32ch; color: var(--ds-secondary); @apply type-small; }
.ds-setting-controls { display: grid; gap: 16px; min-width: 0; align-content: start; }
.ds-form-stack { display: grid; gap: 20px; min-width: 0; align-content: start; }
.ds-form-stack { display: grid; gap: 12px; min-width: 0; align-content: start; }
.ds-form-stack .ds-field { margin-bottom: 0; }
.ds-supporting-copy, .ds-meta-label { color: var(--ds-secondary); @apply type-small; overflow-wrap: anywhere; }
.ds-meta-label { font-variant-numeric: tabular-nums; }
.ds-clock-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ds-clock-fields input { font-variant-numeric: tabular-nums; }
.ds-preference-toggle { padding: 16px; background: var(--ds-surface); border: 1px solid var(--ds-rule); }
.ds-preference-toggle { padding: 12px; background: var(--ds-surface); border: 1px solid var(--ds-rule); }
.ds-preference-toggle .ds-checkbox-description { margin-top: 4px; }
.ds-delivery-note { display: grid; gap: 6px; padding: 14px 16px; border-left: 2px solid var(--ds-control-border); background: var(--ds-surface); @apply type-small; }
.ds-confirmation { padding: 24px; background: var(--ds-surface); border-left: 2px solid var(--ds-ink); }
@@ -1546,7 +1546,7 @@
}
@media (max-width: 640px) {
.ds-panel-description { @apply type-small; }
.ds-setting-row { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 24px 0; }
.ds-setting-row { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px 0; }
.ds-setting-heading > div { max-width: none; }
.ds-confirmation, .ds-empty-panel { padding: 18px; }
.ds-history-editor { grid-template-columns: minmax(0, 1fr); padding: 20px; gap: 24px; }
@@ -1561,12 +1561,12 @@
.ds-modal[open] { display: flex; flex-direction: column; }
.ds-modal--compact { width: min(660px, calc(100vw - 64px)); }
.ds-modal::backdrop { background: #11111166; backdrop-filter: blur(3px); }
.ds-modal-heading { display: flex; flex: 0 0 auto; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 28px 32px 24px; border-bottom: 1px solid var(--ds-rule); }
.ds-modal-heading { display: flex; flex: 0 0 auto; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--ds-rule); }
.ds-modal-heading > div { min-width: 0; }
.ds-modal-heading h2 { margin-top: 8px; @apply type-section; overflow-wrap: anywhere; }
.ds-modal-heading h2 { margin-top: 0; @apply type-title; overflow-wrap: anywhere; }
.ds-modal-heading h2:focus { outline: none; }
.ds-modal-heading .ds-panel-description { @apply type-small; }
.ds-modal-body { overflow-y: auto; overscroll-behavior: contain; min-height: 0; padding: 28px 32px 32px; scrollbar-gutter: stable; }
.ds-modal-body { overflow-y: auto; overscroll-behavior: contain; min-height: 0; padding: 20px 24px; scrollbar-gutter: auto; }
.ds-modal-body > .ds-setting-row:first-child { border-top: 0; padding-top: 0; }
.ds-modal-body > .ds-record-list > .ds-record:first-child { border-top: 0; }
.ds-modal-body > .ds-record-list > .ds-record:first-child > .ds-record-heading { padding-top: 0; }
@@ -1574,9 +1574,9 @@
.ds-modal-body > .ds-history-editor { border: 0; background: transparent; padding: 0; margin: 0; }
@media (max-width: 640px) {
.ds-modal, .ds-modal--compact { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
.ds-modal-heading { padding: 20px; gap: 16px; }
.ds-modal-heading { padding: 16px; gap: 12px; }
.ds-modal-heading h2 { @apply type-title; }
.ds-modal-body { padding: 20px; }
.ds-modal-body { padding: 16px; }
}
/* Compact workspace variants share the same spacing and control language. */
@@ -1599,7 +1599,7 @@
.ds-habits-section .ds-section-top { margin-bottom: 24px; align-items: center; flex-wrap: wrap; }
.ds-habits-section .ds-section-top h2 { @apply type-title; margin-top: 0; }
.ds-habit-filters { display: inline-flex; width: fit-content; gap: 4px; padding: 4px; background: var(--ds-surface); border: 1px solid var(--ds-rule); border-radius: 6px; }
.ds-habit-filters .ds-button { @apply type-small; color: var(--ds-secondary); border: 1px solid transparent; background: transparent; border-radius: 3px; }
.ds-habit-filters .ds-button { @apply type-small; color: var(--ds-secondary); border: 1px solid transparent; background: transparent; border-radius: 0; }
.ds-habit-filters .ds-button[aria-pressed="true"] { color: var(--ds-ink); background: var(--ds-paper); border-color: var(--ds-rule); box-shadow: 0 1px 2px #00000008; }
.ds-habit-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
.ds-habit-list > .ds-habit-chart { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px; padding: 24px 0; border-top: 1px solid var(--ds-rule); }
@@ -1614,17 +1614,13 @@
.ds-habit-history-toggle { display: inline-flex; align-items: center; gap: 8px; @apply type-small; color: var(--ds-secondary); }
.ds-habit-history-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.ds-habit-history-panel { margin-top: 16px; }
.ds-counter { flex-wrap: wrap; max-width: 100%; gap: 4px; padding: 4px; border: 1px solid var(--ds-rule); border-radius: 6px; background: var(--ds-paper); }
.ds-counter-input { box-sizing: border-box; width: 7ch; min-width: 56px; min-height: 44px; padding: 8px; border: 1px solid transparent; background: var(--ds-surface); color: var(--ds-ink); text-align: center; font: inherit; font-variant-numeric: tabular-nums; border-radius: 3px; }
.ds-counter { flex-wrap: wrap; max-width: 100%; gap: 8px; padding: 0; border: 0; background: transparent; }
.ds-counter-value { display: flex; align-items: center; min-width: 0; }
.ds-counter-input { box-sizing: border-box; width: 7ch; min-width: 56px; min-height: 44px; padding: 8px; border: 1px solid transparent; background: var(--ds-surface); color: var(--ds-ink); text-align: center; font: inherit; font-variant-numeric: tabular-nums; border-radius: 0; }
.ds-counter-input:hover:not(:disabled) { border-color: var(--ds-control-border); }
.ds-counter .ds-muted { padding-right: 8px; font-variant-numeric: tabular-nums; }
.ds-counter .ds-button.ds-counter-save { width: auto; padding: 8px 12px; @apply type-small; font-weight: 500; }
.ds-counter-error { flex-basis: 100%; padding: 4px 8px; @apply type-small; }
.ds-habit-starters { margin-bottom: 16px; padding: 16px; background: var(--ds-surface); border-radius: 4px; }
.ds-habit-starter-options { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ds-habit-starter-options .ds-button { @apply type-small; background: var(--ds-paper); }
.ds-habit-starter-options .ds-button--text { background: transparent; }
.ds-color-swatches--compact { flex-wrap: wrap; }
@media (max-width: 700px) {
.ds-welcome-panel--compact { padding: 20px; margin-top: 20px; }
.ds-welcome-top { align-items: flex-start; flex-wrap: wrap; gap: 16px; }
@@ -1656,38 +1652,43 @@
.ds-goal-status { display: inline-flex; align-items: center; gap: 8px; @apply type-small; }
.ds-goal-body { display: grid; grid-template-columns: minmax(0, 1fr) 304px; gap: 32px; align-items: start; }
.ds-goal-graph { grid-column: 1; grid-row: 1; min-width: 0; }
.ds-goal-completion { grid-column: 2; grid-row: 1; min-width: 0; padding: 24px; background: var(--ds-surface); border-top: 3px solid var(--habit-color); }
.ds-goal-count { display: grid; gap: 12px; }
.ds-goal-target { @apply type-body; font-weight: 500; overflow-wrap: anywhere; }
.ds-goal-count .ds-counter { width: fit-content; max-width: 100%; border-radius: 0; gap: 4px; padding: 0; justify-content: flex-start; }
.ds-goal-count .ds-counter-input { @apply type-body; font-family: var(--ds-sans); font-weight: 500; width: 5ch; min-width: 44px; height: 44px; min-height: 44px; padding: 8px 4px; background: var(--ds-paper); border-radius: 0; }
.ds-goal-count .ds-counter .ds-button { @apply type-lead; height: 44px; }
.ds-goal-count .ds-counter .ds-counter-save { @apply type-small; flex-basis: 100%; border-width: 1px 0 0; }
.ds-goal-count .ds-counter > .ds-muted { padding: 0 12px 0 4px; white-space: nowrap; }
.ds-goal-check-in { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 0 12px; }
.ds-goal-completion { grid-column: 2; grid-row: 1; min-width: 0; padding: 16px; background: var(--ds-surface); }
.ds-goal-count { display: grid; justify-items: center; gap: 4px; }
.ds-goal-target { @apply type-small; color: var(--ds-secondary); text-align: center; overflow-wrap: anywhere; }
.ds-goal-count .ds-counter { display: grid; grid-template-columns: 32px minmax(0, 1fr) 32px; width: min(100%, 220px); gap: 8px; align-items: center; }
.ds-goal-count .ds-counter-value { display: grid; justify-items: center; gap: 2px; }
.ds-goal-count .ds-counter-input { @apply type-control; font-family: var(--ds-sans); font-weight: 500; width: 100%; min-width: 0; height: 36px; min-height: 36px; padding: 2px 0; background: transparent; border-radius: 0; }
.ds-goal-count .ds-counter .ds-button { @apply type-lead; width: 32px; min-width: 32px; height: 32px; min-height: 32px; background: var(--ds-paper); color: var(--ds-ink); border: 0; }
.ds-goal-count .ds-counter .ds-button:hover:not(:disabled) { background: var(--ds-ink); color: var(--ds-paper); }
.ds-goal-count .ds-counter .ds-counter-save { grid-column: 1 / -1; width: 100%; @apply type-small; background: var(--ds-ink); color: var(--ds-paper); }
.ds-goal-count .ds-counter-target { padding: 0; white-space: nowrap; @apply type-small; }
.ds-goal-count .ds-counter-error { grid-column: 1 / -1; padding: 0; }
.ds-goal-check-in { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 44px; }
.ds-goal-check-in > .ds-checkbox { justify-content: center; }
.ds-goal-check-in > label[for] { @apply type-body; font-weight: 500; cursor: pointer; }
.ds-goal-completion .ds-checkbox input { width: 20px; height: 20px; min-width: 20px; min-height: 20px; flex: 0 0 20px; aspect-ratio: 1; }
.ds-goal-task-progress { display: grid; gap: 12px; margin-bottom: 16px; @apply type-body; font-weight: 500; }
.ds-goal-task-progress progress { appearance: none; width: 100%; height: 4px; border: 0; background: var(--ds-rule); accent-color: var(--habit-color); }
.ds-goal-check-in > label[for] { @apply type-body; font-weight: 500; cursor: pointer; padding-block: 8px; }
.ds-goal-completion .ds-checkbox input { width: 22px; height: 22px; min-width: 22px; min-height: 22px; flex: 0 0 22px; border: 2px solid var(--ds-control-border); aspect-ratio: 1; }
.ds-goal-check-in .ds-checkbox input { width: 24px; height: 24px; flex-basis: 24px; }
.ds-goal-completion .ds-checkbox input:checked::after { width: 10px; height: 5px; border-width: 0 0 2px 2px; }
.ds-goal-check-in .ds-checkbox input:checked::after { width: 11px; height: 6px; }
.ds-goal-task-progress { display: grid; gap: 10px; margin-bottom: 8px; @apply type-small; font-weight: 500; }
.ds-goal-task-progress progress { appearance: none; width: 100%; height: 4px; border: 0; background: var(--ds-rule); accent-color: var(--ds-ink); }
.ds-goal-task-progress progress::-webkit-progress-bar { background: var(--ds-rule); }
.ds-goal-task-progress progress::-webkit-progress-value { background: var(--habit-color); }
.ds-goal-task-progress progress::-moz-progress-bar { background: var(--habit-color); }
.ds-goal-task-progress progress::-webkit-progress-value { background: var(--ds-ink); }
.ds-goal-task-progress progress::-moz-progress-bar { background: var(--ds-ink); }
.ds-routine-items { list-style: none; padding: 0; margin: 0; }
.ds-routine-items .ds-editable-task-row { gap: 8px; align-items: flex-start; padding-block: 0; }
.ds-routine-items .ds-item-actions { padding-top: 2px; }
.ds-routine-items .ds-editable-task-row > .ds-checkbox { min-height: 48px; min-width: 0; align-items: flex-start; gap: 12px; padding-block: 12px; @apply type-body; }
.ds-routine-items .ds-checkbox input { margin-top: 2px; }
.ds-routine-items .ds-checkbox-copy { gap: 4px; overflow-wrap: anywhere; }
.ds-goal-completion input:checked { background: var(--habit-color); border-color: var(--habit-color); }
.ds-goal-completion input:checked { background: var(--ds-ink); border-color: var(--ds-ink); }
.ds-routine-items .ds-editable-task-row:has(input:checked) .ds-checkbox-label { color: var(--ds-secondary); text-decoration: line-through; }
.ds-goal-tasks .ds-task-add-action { padding: 8px 0 0; border-top: 1px solid var(--ds-rule); }
.ds-goal-tasks .ds-task-add-action .ds-button { justify-content: flex-start; gap: 12px; padding: 0; border: 0; min-height: 44px; @apply type-body; }
.ds-goal-tasks .ds-task-add-action svg { width: 20px; height: 20px; flex: 0 0 20px; }
.ds-habit-starter-options { margin-top: 0; }
@media (max-width: 1000px) {
.ds-goal-body { grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; }
.ds-goal-completion { padding: 20px; }
.ds-goal-completion { padding: 16px; }
}
@media (max-width: 760px) {
.ds-habit-list > .ds-goal { padding: 24px 0; }
@@ -1695,7 +1696,7 @@
.ds-goal-heading-actions { justify-content: space-between; width: 100%; }
.ds-goal-body { display: flex; flex-direction: column; gap: 24px; }
.ds-goal-completion, .ds-goal-graph { width: 100%; }
.ds-goal-count .ds-counter { justify-content: flex-start; width: fit-content; }
.ds-goal-count { width: min(100%, 240px); margin-inline: auto; }
}
@media (forced-colors: active) {
.ds-goal-completion { border: 1px solid CanvasText; }
@@ -1718,14 +1719,42 @@
}
.ds-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 20px; flex-wrap: wrap; }
/* Native radios keep arrow-key selection while presenting one compact control. */
.ds-theme-control { display: inline-flex; flex: 0 0 auto; width: fit-content; padding: 4px; gap: 2px; border: 1px solid var(--ds-rule); border-radius: 12px; background: var(--ds-surface); @apply type-small; }
.ds-theme-control { display: inline-flex; flex: 0 0 auto; width: fit-content; padding: 0; gap: 2px; border: 0; border-radius: 0; background: transparent; @apply type-small; }
.ds-theme-option { position: relative; cursor: pointer; }
.ds-theme-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ds-theme-option > span { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 0 11px; border: 1px solid transparent; border-radius: 8px; color: var(--ds-secondary); white-space: nowrap; transition: background-color 120ms ease, color 120ms ease; }
.ds-theme-option > span { display: flex; align-items: center; justify-content: center; gap: 0; width: 36px; min-height: 36px; padding: 0; border: 0; border-radius: 0; color: var(--ds-secondary); white-space: nowrap; transition: background-color 120ms ease, color 120ms ease; }
.ds-theme-option svg { flex: 0 0 auto; }
.ds-theme-option:hover > span { color: var(--ds-ink); background: var(--ds-selection); }
.ds-theme-option input:checked + span { color: var(--ds-ink); background: var(--ds-paper); border-color: var(--ds-rule); box-shadow: 0 1px 3px rgb(0 0 0 / 8%); }
.ds-theme-option input:checked + span { color: var(--ds-paper); background: var(--ds-ink); box-shadow: none; }
.ds-theme-option input:focus-visible + span { outline: 2px solid var(--ds-ink); outline-offset: 2px; }
.ds-theme-option input:disabled + span { opacity: .45; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .ds-theme-option > span { transition: none; } }
@media (max-width: 600px) { .ds-header { flex-wrap: wrap; } .ds-header-actions { gap: 12px; } }
/* Compact shared forms retain clear labels, usable controls, and responsive columns. */
.ds-habit-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ds-habit-form-grid > * { grid-column: 1 / -1; min-width: 0; }
.ds-habit-form-grid > .ds-field:nth-child(2), .ds-habit-form-grid > .ds-schedule-editor { grid-column: auto; }
.ds-habit-form-grid .ds-field { margin-bottom: 0; gap: 6px; }
.ds-habit-form-grid .ds-form-grid { gap: 12px; }
.ds-habit-form-grid .ds-form-section { display: grid; gap: 12px; margin: 0; padding-top: 16px; }
.ds-habit-form-grid .ds-schedule-editor { display: grid; align-content: start; gap: 12px; }
.ds-habit-form-grid:has(.ds-schedule-editor > :nth-child(2)) > .ds-schedule-editor { grid-column: 1 / -1; }
.ds-habit-form-grid .ds-weekday-field { margin: 0; }
.ds-habit-form-grid .ds-footnote { margin: 0; @apply type-small; }
.ds-habit-form-grid > .ds-checkbox { @apply type-small; }
.ds-modal-body .ds-form-actions, .ds-modal-body .ds-inline-form-actions { gap: 12px; margin-top: 16px; }
.ds-modal-body .ds-input-row { min-width: 0; }
.ds-modal-body .ds-form-message:empty, .ds-setting-heading > div:empty { display: none; }
.ds-calendar[data-months="1"] .ds-calendar-timeline { max-width: calc(46px + var(--calendar-weeks) * 32px + (var(--calendar-weeks) - 1) * var(--calendar-gap)); }
@media (max-width: 480px) {
.ds-habit-form-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ds-habit-form-grid .ds-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds-weekdays { gap: 2px; }
.ds-weekdays button { min-width: 32px; flex: 1; padding-inline: 2px; }
}
@media (pointer: coarse) { .ds-theme-option > span { width: 44px; min-height: 44px; } }
.ds-inline-item-fields:not(.ds-habit-form-grid) { display: grid; gap: 12px; }
.ds-inline-item-fields:not(.ds-habit-form-grid) .ds-field { margin: 0; }
.ds-inline-item-fields:not(.ds-habit-form-grid) .ds-schedule-editor { display: grid; gap: 12px; }

22
styles/live-discord.css
View File

@@ -1,14 +1,14 @@
.ds-live-discord { display: grid; gap: 18px; }
.ds-live-discord-heading, .ds-live-discord-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.ds-live-discord-heading h3 { font-size: 20px; margin: 0 0 6px; }
.ds-live-discord-heading p, .ds-live-discord-footer p { margin: 4px 0; font-size: 13px; }
.ds-live-discord-preview { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; border: 1px solid var(--ds-border, #858a8066); display: grid; place-items: center; }
@reference "./globals.css";
.ds-live-discord { display: grid; gap: 12px; padding: 0 24px 20px; }
.ds-live-discord-heading, .ds-live-discord-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ds-live-discord-heading h3 { @apply type-ui-heading; margin: 0; }
.ds-live-discord-heading p, .ds-live-discord-footer p { margin: 4px 0; @apply type-small; }
.ds-live-discord-preview { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 0; border: 1px solid var(--ds-rule); display: grid; place-items: center; }
.ds-live-discord-preview img { width: 100%; height: 100%; display: block; object-fit: contain; }
.ds-live-discord-description { font-size: 14px; margin: 0; }
.ds-live-discord-privacy { font-size: 12px; opacity: .75; margin: 0; }
.ds-live-discord-footer { border-top: 1px solid #858a8033; padding-top: 18px; }
.ds-live-discord-description { @apply type-small; margin: 0; }
.ds-live-discord-privacy { @apply type-small; color: var(--ds-secondary); margin: 0; }
.ds-live-discord-footer { border-top: 1px solid var(--ds-rule); padding-top: 12px; }
.ds-live-discord-footer .ds-share-actions { flex-wrap: wrap; }
.ds-sharing-mode { display: flex; gap: 8px; margin-bottom: 20px; }
.ds-live-discord { padding: 0 32px 24px; }
.ds-sharing-mode { padding: 0 32px; margin-top: 20px; }
.ds-sharing-mode { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 24px; margin-block: 16px; }
@media (max-width: 600px) { .ds-live-discord { padding: 0 16px 16px; } .ds-sharing-mode { padding: 0 16px; } }