raunaqgupta_obsidian-cookla.../styles.css
rawknuckles 80549f64d4
Remove display: contents from metadata layout (#17)
Flatten the metadata <dl> so <dt>/<dd> pairs are direct grid items,
removing the need for a wrapper div with display: contents (which
has historically had patchy accessibility tree support).

Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-15 21:48:21 -07:00

134 lines
2.7 KiB
CSS

.cooklang-recipe {
border-radius: var(--radius-s);
padding: var(--size-4-4);
color: var(--text-normal);
line-height: var(--line-height-normal);
position: relative;
border: var(--border-width) solid var(--background-modifier-border);
}
.cooklang-metadata {
padding-bottom: var(--size-4-4);
}
.cooklang-title {
margin: 0 0 var(--size-4-2) 0;
font-size: var(--h3-size);
font-weight: var(--h3-weight);
color: var(--text-normal);
}
.cooklang-meta-list {
margin: 0;
display: grid;
grid-template-columns: max-content 1fr;
gap: var(--size-4-1) var(--size-4-3);
}
.cooklang-meta-key {
font-weight: var(--font-semibold);
color: var(--text-muted);
text-transform: capitalize;
}
.cooklang-meta-value {
margin: 0;
color: var(--text-normal);
}
/* ---------- Section headings ---------- */
.cooklang-recipe h4 {
margin: var(--size-4-4) 0 var(--size-4-2) 0;
font-size: var(--h4-size);
font-weight: var(--h4-weight);
color: var(--text-normal);
text-transform: capitalize;
}
.cooklang-recipe > .cooklang-metadata + .cooklang-ingredients h4,
.cooklang-recipe > .cooklang-ingredients:first-child h4 {
margin-top: 0;
}
/* ---------- Ingredients & cookware lists ---------- */
.cooklang-ingredients ul,
.cooklang-cookware ul {
margin: 0;
}
.cooklang-ingredient-item,
.cooklang-cookware-item {
margin: var(--size-4-1) 0;
}
.cooklang-quantity {
font-weight: var(--font-semibold);
}
/* ---------- Steps ---------- */
.cooklang-steps ol {
margin: 0;
}
.cooklang-step {
margin: var(--size-4-2) 0;
padding-left: var(--size-4-1);
}
.cooklang-step::marker {
color: var(--text-muted);
font-weight: var(--font-semibold);
}
/* ---------- Inline token highlights ---------- */
.cooklang-inline-timer {
display: inline-block;
background: var(--background-secondary);
color: var(--text-normal);
padding: var(--size-2-1) var(--size-4-2);
border-radius: var(--radius-s);
font-family: var(--font-monospace);
font-size: var(--font-smaller);
}
/* ---------- Error state ---------- */
.cooklang-error {
border: var(--border-width) solid var(--text-error);
border-radius: var(--radius-m);
padding: var(--size-4-3) var(--size-4-4);
margin: var(--size-4-4) 0;
background: var(--background-primary);
color: var(--text-normal);
}
.cooklang-error-header {
display: flex;
align-items: center;
gap: var(--size-4-2);
margin-bottom: var(--size-4-2);
}
.cooklang-error-icon {
color: var(--text-error);
font-size: var(--font-ui-medium);
}
.cooklang-error-message {
font-weight: var(--font-semibold);
color: var(--text-error);
}
.cooklang-error-source {
margin: 0;
padding: var(--size-4-2) var(--size-4-3);
background: var(--background-secondary);
border-radius: var(--radius-s);
font-size: var(--font-smallest);
white-space: pre-wrap;
color: var(--text-muted);
}