feat: complete minute birth-time rectification flow
This commit is contained in:
Jesse_Chen
+170
-46
@@ -132,7 +132,7 @@ button:disabled { cursor: default; opacity: .45; }
|
||||
.onboarding-card-heading { display: grid; gap: 4px; padding-bottom: 2px; }
|
||||
.onboarding-card-actions { display: flex; justify-content: flex-end; padding-top: 2px; }
|
||||
.onboarding-card-actions .button-primary { min-width: 84px; }
|
||||
.birth-time-transition-card { position: relative; overflow: hidden; }
|
||||
.birth-time-transition-card { position: relative; overflow: visible; }
|
||||
[data-sonner-toaster] [data-sonner-toast] { border: 1px solid var(--color-border) !important; border-radius: var(--radius-lg) !important; background: var(--color-canvas) !important; color: var(--color-ink) !important; box-shadow: var(--shadow-elevated) !important; }
|
||||
[data-sonner-toast] [data-title] { font-size: var(--type-body-sm); font-weight: 600; }
|
||||
[data-sonner-toast] [data-description] { color: var(--color-ink-secondary) !important; font-size: var(--type-caption); line-height: 1.5; }
|
||||
@@ -165,7 +165,7 @@ button:disabled { cursor: default; opacity: .45; }
|
||||
.message-markdown ul, .message-markdown ol { margin: 10px 0 16px; padding-left: 24px; }
|
||||
.message-markdown li { margin: 6px 0; }
|
||||
.agent-activity-status { min-height: 24px; display: flex; align-items: center; gap: var(--space-2); color: var(--color-ink-secondary); font-size: var(--type-body-sm); line-height: 1.5; }
|
||||
.agent-activity-status canvas, .agent-activity-status svg { flex: 0 0 auto; }
|
||||
.agent-activity-status canvas { flex: 0 0 auto; }
|
||||
.agent-activity-status + .message-markdown { margin-top: var(--space-2); }
|
||||
.composer-suggestions::-webkit-scrollbar { display: none; }
|
||||
.composer textarea::placeholder { color: var(--color-ink-tertiary); }
|
||||
@@ -180,6 +180,31 @@ button:disabled { cursor: default; opacity: .45; }
|
||||
.profile-grid, .location-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
||||
.location-fieldset { margin: 0; padding: 0; border: 0; }
|
||||
.location-fieldset legend { margin-bottom: 10px; color: var(--color-ink-secondary); font-size: 11px; font-weight: 600; }
|
||||
.location-combobox { position: relative; display: grid; gap: 7px; }
|
||||
.location-combobox > label { color: var(--color-ink-secondary); font-size: 11px; font-weight: 600; }
|
||||
.location-combobox-input-wrap { position: relative; }
|
||||
.location-combobox-input-wrap input { width: 100%; min-height: 46px; padding-left: 42px; padding-right: 42px; }
|
||||
.location-combobox.is-selected .location-combobox-input-wrap input { border-color: color-mix(in srgb, var(--color-success) 42%, var(--color-border)); background: color-mix(in srgb, var(--color-success-muted) 42%, var(--color-canvas)); }
|
||||
.location-combobox-leading { width: 17px; height: 17px; position: absolute; z-index: 1; left: 14px; top: 50%; color: var(--color-ink-tertiary); pointer-events: none; transform: translateY(-50%); }
|
||||
.location-combobox-leading.is-spinning { animation: location-combobox-spin .8s linear infinite; }
|
||||
.location-combobox-clear { width: 32px; height: 32px; position: absolute; right: 7px; top: 50%; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--color-ink-secondary); cursor: pointer; transform: translateY(-50%); }
|
||||
.location-combobox-clear:hover { background: var(--color-canvas-muted); color: var(--color-ink); }
|
||||
.location-combobox-clear svg { width: 16px; height: 16px; }
|
||||
.location-combobox-status { min-height: 20px; display: flex; align-items: flex-start; gap: 6px; margin: 0; color: var(--color-ink-tertiary); font-size: 11px; line-height: 1.5; }
|
||||
.location-combobox.is-selected .location-combobox-status { color: var(--color-success); }
|
||||
.location-combobox-status.is-error { color: var(--color-danger); }
|
||||
.location-combobox-status svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 1px; }
|
||||
.location-combobox-results { width: 100%; max-height: 280px; position: absolute; z-index: 70; top: calc(100% - 16px); left: 0; overflow-y: auto; display: grid; gap: 2px; margin: 0; padding: 5px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-canvas); box-shadow: var(--shadow-elevated); list-style: none; }
|
||||
.location-combobox-results li { margin: 0; }
|
||||
.location-combobox-results li > button { width: 100%; min-height: 50px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-ink); cursor: pointer; text-align: left; }
|
||||
.location-combobox-results li > button > svg { width: 17px; height: 17px; color: var(--color-ink-tertiary); }
|
||||
.location-combobox-results li > button > span { min-width: 0; display: grid; gap: 2px; }
|
||||
.location-combobox-results li > button b { overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.location-combobox-results li > button small { overflow: hidden; color: var(--color-ink-tertiary); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.location-combobox-results li.is-active > button, .location-combobox-results li > button:hover { background: var(--color-action-soft); color: var(--color-action-hover); }
|
||||
.location-combobox-feedback { padding: 12px; color: var(--color-ink-secondary); font-size: 12px; line-height: 1.5; }
|
||||
.location-combobox-feedback.is-error { color: var(--color-danger); }
|
||||
@keyframes location-combobox-spin { to { transform: translateY(-50%) rotate(360deg); } }
|
||||
.save-profile { justify-self: end; }
|
||||
.form-error { background: var(--color-danger-muted); color: var(--color-danger); }
|
||||
.form-success { background: var(--color-success-muted); color: var(--color-success); }
|
||||
@@ -541,6 +566,41 @@ button:disabled { cursor: default; opacity: .45; }
|
||||
.message-content { min-width: 0; max-width: min(80%, 680px); }
|
||||
.message-bubble { overflow: hidden; border: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--color-canvas-muted); }
|
||||
.message-assistant .message-bubble { border-radius: 0; background: transparent; padding: var(--space-3) 0; }
|
||||
.rectification-message-entry { min-width: 0; }
|
||||
.rectification-message-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1px;
|
||||
margin: -4px 0 8px 42px;
|
||||
color: var(--color-ink-tertiary);
|
||||
}
|
||||
.rectification-message-actions button {
|
||||
display: inline-flex;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
flex: 0 0 26px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 0;
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
opacity: .7;
|
||||
transition: background-color 120ms ease-out, color 120ms ease-out, opacity 120ms ease-out, transform 120ms ease-out;
|
||||
}
|
||||
.rectification-message-actions button:hover:not(:disabled) {
|
||||
background: color-mix(in srgb, var(--color-canvas-muted) 72%, transparent);
|
||||
color: var(--color-ink-secondary);
|
||||
opacity: 1;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.rectification-message-actions button:active:not(:disabled) { transform: translateY(0); }
|
||||
.rectification-message-actions button.is-active { color: var(--color-action); opacity: 1; }
|
||||
.rectification-message-actions button:focus-visible { outline: 2px solid color-mix(in srgb, var(--color-focus) 52%, transparent); outline-offset: 1px; }
|
||||
.rectification-message-actions button:disabled { cursor: default; opacity: 0.32; }
|
||||
.rectification-message-actions svg { width: 13px; height: 13px; stroke-width: 1.65; }
|
||||
.message p, .message-markdown { color: var(--color-ink-strong); font-size: var(--type-body-md); line-height: 1.65; text-wrap: pretty; word-break: auto-phrase; }
|
||||
.message-evidence-status { margin: var(--space-3) 0 0; padding-top: var(--space-2); border-top: 1px solid var(--color-border); color: var(--color-ink-muted); font-size: var(--type-body-sm); line-height: 1.5; }
|
||||
.message-user p { line-height: 1.55; color: var(--color-ink); font-size: var(--type-body-sm); }
|
||||
@@ -561,9 +621,7 @@ button:disabled { cursor: default; opacity: .45; }
|
||||
.composer button { width: 44px; height: 44px; display: grid; flex: 0 0 auto; place-items: center; border: 0; color: var(--color-on-dark); cursor: pointer; transition: background-color 120ms ease-out, transform 120ms ease-out; border-radius: var(--radius-md); background: var(--color-action); }
|
||||
.composer .composer-stop { background: var(--color-action); }
|
||||
.composer .composer-stop:not(:disabled):hover { background: var(--color-action-hover); }
|
||||
.composer-footer { width: min(760px, 100%); min-height: 44px; display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; margin: var(--space-1) auto 0; }
|
||||
.composer-footer > p { grid-column: 2; margin: 0; color: var(--color-ink-tertiary); text-align: center; font-size: var(--type-overline); }
|
||||
.composer-footer > p.composer-notice { display: block; color: var(--color-action-hover); }
|
||||
.composer-footer { width: min(760px, 100%); min-height: 44px; display: flex; align-items: center; margin: var(--space-1) auto 0; }
|
||||
.model-selector-trigger { width: fit-content; min-width: 0; max-width: min(100%, 360px); min-height: 44px; display: inline-flex; grid-column: 1; align-items: center; justify-self: start; gap: var(--space-2); border: 0; padding: 0 var(--space-2); border-radius: var(--radius-md); background: transparent; color: var(--color-ink-secondary); cursor: pointer; transition: background-color 120ms ease-out, color 120ms ease-out; }
|
||||
.model-selector-trigger > b { min-width: 0; overflow: visible; overflow-wrap: anywhere; text-align: left; white-space: normal; font-size: var(--type-caption); font-weight: 500; line-height: 1.35; }
|
||||
.model-selector-trigger svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--color-ink-tertiary); transition: transform 120ms ease-out; }
|
||||
@@ -582,9 +640,6 @@ button:disabled { cursor: default; opacity: .45; }
|
||||
.model-selector-option[data-selected] .model-selector-check { opacity: 1; }
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.composer-footer { grid-template-columns: minmax(0, 1fr); }
|
||||
.composer-footer > p:not(.composer-notice) { display: none; }
|
||||
.composer-footer > p.composer-notice { grid-column: 1; grid-row: 2; margin: 0 auto; }
|
||||
.model-selector-trigger { max-width: 100%; grid-column: 1; grid-row: 1; }
|
||||
}
|
||||
|
||||
@@ -782,44 +837,13 @@ input:disabled, select:disabled { color: var(--color-ink-tertiary); background:
|
||||
/* Conversational rectification shell */
|
||||
.conversation.is-rectification { overflow: hidden; padding-bottom: 0; }
|
||||
.rectification-chat { height: 100%; min-height: 0; display: flex; flex-direction: column; color: var(--color-ink); }
|
||||
.rectification-message-list {
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
padding-bottom: var(--space-6);
|
||||
scrollbar-color: transparent transparent;
|
||||
scrollbar-gutter: stable;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
.rectification-message-list.is-scrollbar-visible,
|
||||
.rectification-message-list:focus-within {
|
||||
scrollbar-color: color-mix(in srgb, var(--color-ink-tertiary) 46%, transparent) transparent;
|
||||
}
|
||||
.rectification-message-list::-webkit-scrollbar { width: 10px; }
|
||||
.rectification-message-list::-webkit-scrollbar-track { background: transparent; }
|
||||
.rectification-message-list::-webkit-scrollbar-thumb {
|
||||
min-height: 40px;
|
||||
border: 3px solid transparent;
|
||||
border-radius: 999px;
|
||||
background: transparent;
|
||||
background-clip: padding-box;
|
||||
transition: background-color 160ms ease;
|
||||
}
|
||||
.rectification-message-list.is-scrollbar-visible::-webkit-scrollbar-thumb,
|
||||
.rectification-message-list:focus-within::-webkit-scrollbar-thumb {
|
||||
background: color-mix(in srgb, var(--color-ink-tertiary) 42%, transparent);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
.rectification-message-list::-webkit-scrollbar-thumb:hover {
|
||||
background: color-mix(in srgb, var(--color-ink-secondary) 62%, transparent);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
.rectification-message-list { min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-bottom: var(--space-6); }
|
||||
.rectification-correction-target button { min-height: 44px; padding-inline: var(--space-3); border: 0; background: transparent; color: var(--color-action); cursor: pointer; }
|
||||
.rectification-composer-wrap { position: static; flex: 0 0 auto; }
|
||||
.rectification-correction-target { width: min(760px, 100%); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin: 0 auto var(--space-2); color: var(--color-ink-secondary); font-size: var(--type-caption); }
|
||||
.rectification-correction-target p { margin: 0; }
|
||||
.conversational-empty-state { width: min(760px, 100%); margin: var(--space-8) auto; color: var(--color-ink-secondary); }
|
||||
.conversational-loading { min-height: min(52vh, 460px); display: grid; place-items: center; padding: var(--space-6); }
|
||||
|
||||
@media (max-width: 430px) {
|
||||
.rectification-correction-target { align-items: stretch; display: grid; }
|
||||
@@ -1239,11 +1263,9 @@ input:disabled, select:disabled { color: var(--color-ink-tertiary); background:
|
||||
width: min(1040px, 100%);
|
||||
margin-left: 0;
|
||||
padding: var(--space-6);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-xl);
|
||||
background: var(--color-canvas-soft);
|
||||
color: var(--color-ink-secondary);
|
||||
font-size: var(--type-body-sm);
|
||||
min-height: min(52vh, 460px);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.starter-note {
|
||||
@@ -1536,3 +1558,105 @@ input:disabled, select:disabled { color: var(--color-ink-tertiary); background:
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Birth-time intake: make the next action obvious without adding another component. */
|
||||
.onboarding-card.birth-time-transition-card { max-width: 760px; padding: clamp(20px, 3vw, 32px); border-color: color-mix(in srgb, var(--color-action) 18%, var(--color-border)); border-radius: var(--radius-xl); background: var(--color-canvas); box-shadow: var(--shadow-elevated); }
|
||||
.onboarding-card-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); padding-bottom: var(--space-2); }
|
||||
.onboarding-card-heading-copy { display: grid; gap: 5px; }
|
||||
.onboarding-card-kicker { color: var(--color-action); font-size: var(--type-overline); font-weight: 700; letter-spacing: .08em; }
|
||||
.onboarding-card-heading b { font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.03em; }
|
||||
.onboarding-card-heading small { max-width: 260px; color: var(--color-ink-secondary); line-height: 1.55; font-size: var(--type-caption); text-wrap: pretty; }
|
||||
.birth-time-intake { gap: var(--space-6); }
|
||||
.birth-time-source-fieldset { padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
|
||||
.birth-time-source-fieldset legend { margin-bottom: 5px; color: var(--color-ink); font-size: var(--type-title-sm); font-weight: 700; }
|
||||
.birth-time-source-intro { margin: 0 0 var(--space-3); color: var(--color-ink-secondary); font-size: var(--type-caption); line-height: 1.55; }
|
||||
.birth-time-source-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
|
||||
.birth-time-source-option { min-height: 118px; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: var(--space-3); padding: 18px; border-color: var(--color-border); border-radius: var(--radius-lg); background: var(--color-canvas-soft); transition: border-color 160ms ease-out, background-color 160ms ease-out, box-shadow 160ms ease-out, transform 160ms var(--ease-out); }
|
||||
.birth-time-source-option:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -18px var(--color-ink); }
|
||||
.birth-time-source-option.is-selected { border-color: var(--color-action); background: var(--color-action-soft); box-shadow: inset 0 0 0 1px var(--color-action), 0 10px 22px -20px var(--color-action); }
|
||||
.birth-time-source-option input { appearance: none; position: relative; width: 16px; min-width: 16px; height: 16px; min-height: 16px; margin: 3px 0 0; border: 1.5px solid var(--color-border-strong); border-radius: 50%; background: var(--color-canvas); }
|
||||
.birth-time-source-option input:checked { border-color: var(--color-action); background: var(--color-action); box-shadow: inset 0 0 0 4px var(--color-action-soft); }
|
||||
.birth-time-source-option > span { gap: 7px; }
|
||||
.birth-time-source-option b { font-size: var(--type-title-sm); line-height: 1.3; }
|
||||
.birth-time-source-option small { font-size: var(--type-body-sm); line-height: 1.55; }
|
||||
.birth-time-detail-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-canvas-soft); }
|
||||
.birth-time-period-details { align-items: start; }
|
||||
.birth-time-period-details > label { align-self: start; }
|
||||
.birth-time-detail-grid > label { gap: 7px; }
|
||||
.birth-time-detail-grid > label > span { color: var(--color-ink-secondary); font-size: var(--type-caption); font-weight: 700; }
|
||||
.birth-time-detail-grid textarea {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
min-height: 84px;
|
||||
resize: vertical;
|
||||
padding: 12px 13px;
|
||||
border: 1px solid var(--color-border-strong);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-canvas);
|
||||
color: var(--color-ink);
|
||||
line-height: 1.55;
|
||||
transition: border-color 160ms ease-out, box-shadow 160ms ease-out, background-color 160ms ease-out;
|
||||
}
|
||||
.birth-time-detail-grid textarea:hover {
|
||||
border-color: color-mix(in srgb, var(--color-action) 42%, var(--color-border-strong));
|
||||
}
|
||||
.birth-time-detail-grid textarea:focus {
|
||||
border-color: var(--color-action);
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-action) 16%, transparent);
|
||||
}
|
||||
.birth-time-detail-grid textarea::placeholder {
|
||||
color: var(--color-ink-tertiary);
|
||||
}
|
||||
.birth-time-detail-grid textarea::-webkit-resizer {
|
||||
background: color-mix(in srgb, var(--color-border-strong) 70%, transparent);
|
||||
}
|
||||
.birth-time-period-details .birth-time-skip-button { grid-column: 1 / -1; justify-self: start; min-height: 40px; padding-inline: 13px; border-color: transparent; background: transparent; color: var(--color-action); font-size: var(--type-caption); }
|
||||
.birth-time-period-details .birth-time-skip-button:hover { background: color-mix(in srgb, var(--color-action-soft) 72%, transparent); }
|
||||
.birth-time-detail-note[role="status"] { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid color-mix(in srgb, var(--color-action) 25%, var(--color-border)); border-left: 3px solid var(--color-action); border-radius: var(--radius-lg); background: var(--color-action-soft); }
|
||||
.birth-time-detail-note[role="status"] p { margin: 0; }
|
||||
.onboarding-card-actions { align-items: center; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-2); }
|
||||
.onboarding-card-action-hint { color: var(--color-ink-secondary); font-size: var(--type-caption); line-height: 1.4; }
|
||||
|
||||
@media (max-width: 620px) {
|
||||
.onboarding-card-heading { align-items: flex-start; flex-direction: column; gap: var(--space-2); }
|
||||
.birth-time-source-list, .birth-time-detail-grid { grid-template-columns: 1fr; }
|
||||
.birth-time-period-details .birth-time-skip-button { grid-column: auto; justify-self: stretch; }
|
||||
.onboarding-card-actions { align-items: stretch; flex-direction: column; }
|
||||
.onboarding-card-actions .button-primary { width: 100%; }
|
||||
}
|
||||
|
||||
/* shadcn-style select used in onboarding; the native controls remain untouched elsewhere. */
|
||||
.select-trigger { width: 100%; min-height: 44px; display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 0 13px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-canvas); color: var(--color-ink); font: inherit; text-align: left; transition: border-color 160ms ease-out, box-shadow 160ms ease-out, background-color 160ms ease-out; }
|
||||
.select-trigger:hover { border-color: color-mix(in srgb, var(--color-action) 42%, var(--color-border)); background: var(--color-canvas-soft); }
|
||||
.select-trigger:focus-visible { border-color: var(--color-action); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-action) 18%, transparent); }
|
||||
.select-trigger[data-popup-open] { border-color: var(--color-action); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-action) 14%, transparent); }
|
||||
.select-trigger[data-placeholder] { color: var(--color-ink-tertiary); }
|
||||
.select-trigger:disabled { cursor: not-allowed; opacity: .55; }
|
||||
.select-trigger-icon { display: inline-flex; flex: 0 0 auto; color: var(--color-ink-secondary); transition: transform 160ms ease-out; }
|
||||
.select-trigger[data-popup-open] .select-trigger-icon { transform: rotate(180deg); }
|
||||
.select-positioner { z-index: 60; }
|
||||
.select-content { width: var(--anchor-width); min-width: 190px; max-width: min(360px, calc(100vw - 32px)); height: auto !important; max-height: min(360px, calc(100vh - 32px)); overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-canvas); padding: 5px; box-shadow: var(--shadow-elevated); transform-origin: var(--transform-origin); animation: select-content-in 140ms var(--ease-out) both; }
|
||||
.select-list { display: grid; gap: 2px; max-height: min(320px, 50vh) !important; overflow-y: auto !important; outline: none; scrollbar-width: none; -ms-overflow-style: none; }
|
||||
.select-list::-webkit-scrollbar { width: 0; height: 0; display: none; }
|
||||
.select-item { min-height: 40px; position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 9px 10px; border-radius: var(--radius-sm); color: var(--color-ink); font-size: var(--type-body-sm); line-height: 1.35; cursor: pointer; outline: none; user-select: none; }
|
||||
.select-item:hover, .select-item[data-highlighted] { background: var(--color-action-soft); color: var(--color-action-hover); }
|
||||
.select-item[data-selected] { color: var(--color-action-hover); font-weight: 650; }
|
||||
.select-item[data-disabled] { cursor: not-allowed; opacity: .45; }
|
||||
.select-item-indicator { display: inline-flex; flex: 0 0 auto; color: var(--color-action); }
|
||||
@keyframes select-content-in { from { opacity: 0; transform: translateY(-3px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
|
||||
|
||||
.birth-time-source-option { grid-template-columns: minmax(0, 1fr); }
|
||||
.birth-time-source-option input { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
|
||||
.birth-time-source-option:focus-within { border-color: var(--color-action); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-action) 16%, transparent); }
|
||||
.birth-time-source-option.is-selected:focus-within { box-shadow: inset 0 0 0 1px var(--color-action), 0 0 0 3px color-mix(in srgb, var(--color-action) 16%, transparent); }
|
||||
.birth-time-source-option > span { min-width: 0; }
|
||||
|
||||
/* onboarding controls */
|
||||
|
||||
.birth-time-clock-selects { width: min(100%, 250px); display: grid !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
|
||||
.birth-time-clock-separator { color: var(--color-ink-secondary); font-size: var(--type-title-sm); font-weight: 700; }
|
||||
.birth-time-clock-selects .select-trigger { min-width: 0; }
|
||||
|
||||
.birth-time-clock-menu.select-content { width: 108px; min-width: 108px; }
|
||||
.birth-time-clock-menu .select-item { justify-content: flex-start; }
|
||||
|
||||
Reference in New Issue
Block a user