created: 20260423020204937
modified: 20260423020213871
tags: $:/tags/Stylesheet
title: $:/community/recipes/stylesheet
type: text/vnd.tiddlywiki

/* Tidbits logo — text strokes pick up the palette's foreground so the
   logo stays readable on dark and light palettes alike.  The orange
   dots and the final 's' remain hardcoded as brand colour. */
.tc-image-tidbits-logo {
    color: <<colour foreground>>;
}

/* Tidbits section icons (in About-page H2 headings) */
.tc-tidbits-section-icon {
    display: inline-block;
    line-height: 1;
}
.tc-image-tidbits-icon {
    width: 1.2em;
    height: 1.2em;
    vertical-align: -0.18em;
}
/* In the standalone-tiddler titlebar, TW core puts `vertical-align:
   middle` on the wrapper span, which shifts the icon up onto the line
   midpoint and changes the reference frame for our `-0.18em` rule.
   Match the About wrapper's behaviour so the same SVG rule produces
   the same alignment in both contexts. */
.tc-titlebar .tc-tiddler-title-icon {
    display: inline-block;
    line-height: 1;
    vertical-align: baseline;
}

/* Recipe index tag filter */
.tc-recipe-filter {
    margin-bottom: 1em;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
}
.tc-recipe-tag-btn {
    padding: 0.2em 0.75em;
    border-radius: 2em;
    border: 1px solid <<colour primary>>;
    color: <<colour primary>>;
    font-size: 0.85em;
}
.tc-recipe-tag-active {
    background: <<colour primary>>;
    color: <<colour page-background>>;
}

/* Ingredient photo (float left, mirroring recipe's float right) */
.tc-ingredient-photo {
    float: left;
    margin: 0 1.5em 0.75em 0;
    max-width: 35%;
}
.tc-ingredient-photo img {
    max-width: 100%;
    border-radius: 4px;
}
.tc-ingredient-clear {
    clear: both;
}

/* "Also known as" line on canonical ingredient */
.tc-ingredient-aliases {
    margin-top: 0.25em;
    font-size: 1.08em;
    color: <<colour muted-foreground>>;
}

/* Ingredient/used-in footer panel */
.tc-recipe-ingredient-uses {
    margin-top: 0.75em;
    font-size: 0.9em;
}
.tc-recipe-ingredient-uses ul {
    margin: 0.4em 0 0;
    padding-left: 1.5em;
}

@media (max-width: 599px) {
    .tc-ingredient-photo {
        float: none;
        max-width: 100%;
        margin: 0 0 1em;
    }
}

/* Recipe metadata strip */
.tc-recipe-meta {
    margin: 0.25em 0 1.25em;
    font-size: 0.9em;
    color: <<colour muted-foreground>>;
}
.tc-recipe-extra-field {
    display: inline-block;
    margin-right: 1.5em;
}
.tc-recipe-extra-field-caption {
    font-weight: 500;
}

/* Extra-fields table on the Tidbits Control Panel tab — placeholder
   column rendered to match the input-placeholder visual treatment;
   row-action buttons get a subtle hover affordance. */
.tc-recipe-extra-field-placeholder-cell {
    color: <<colour muted-foreground>>;
}
.tc-recipe-extra-field-action {
    border: 1px solid transparent;
    border-radius: 3px;
    padding: 0.1em 0.4em;
}
.tc-recipe-extra-field-action:hover {
    border-color: <<colour primary>>;
}

/* Recipe body layout */
.tc-recipe-split {
    clear: both;
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 2em;
}
.tc-recipe-split-left strong,
.tc-recipe-split-right strong {
    display: block;
    margin-bottom: 0.5em;
    font-size: 1.1em;
    border-bottom: 1px solid <<colour table-border>>;
    padding-bottom: 0.25em;
}

/* Ingredients toggle button — cooking-mode only; visual styling kept here */
.tc-recipe-ingr-toggle {
    display: none;
    font-size: 0.85em;
    border: 1px solid <<colour primary>>;
    border-radius: 1em;
    padding: 0.15em 0.6em;
    color: <<colour primary>>;
    white-space: nowrap;
}

/* Phone layout (<600px): single-column; ingredients always visible in normal mode */
@media (max-width: 599px) {
    .tc-recipe-split {
        grid-template-columns: 1fr;
    }
}

/* About block and photo */
.tc-recipe-about {
    margin-bottom: 1.5em;
}
.tc-recipe-photo {
    float: right;
    margin: 0 0 0.75em 1.5em;
    max-width: 40%;
}
.tc-recipe-photo img {
    max-width: 100%;
    border-radius: 4px;
}

/* Photographer / source attribution beneath a photo */
.tc-recipe-photo-caption {
    margin-top: 0.25em;
    font-size: 0.8em;
    line-height: 1.2;
    color: <<colour muted-foreground>>;
    text-align: center;
}

/* Step-by-step view */
.tc-stepview-header {
    text-align: center;
    margin-bottom: 1.5em;
}
.tc-stepview-progress {
    color: <<colour muted-foreground>>;
    margin-top: 0.25em;
    font-size: 0.9em;
}
.tc-step-num {
    font-weight: bold;
    margin-right: 0.2em;
}

.tc-step {
    display: block;
    width: 100%;
    text-align: left;
    cursor: pointer;
    padding: 0.5em 1em;
    border-left: 3px solid transparent;
    opacity: 0.6;
    font-size: 0.9em;
    line-height: 1.6;
    margin-bottom: 0.4em;
    transition: all 0.15s ease;
}
.tc-step-active {
    opacity: 1;
    font-size: 1.15em;
    border-left-color: <<colour primary>>;
    background: <<colour tiddler-background>>;
    border-radius: 3px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    padding: 0.75em 1em;
    margin: 0.4em 0;
}
.tc-stepview-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: <<colour muted-foreground>>;
    font-size: 1.125em;
    background: <<colour tiddler-background>>;
}

/* Photo section in edit templates */
.tc-recipe-photo-advisory {
    margin: 0 0 0.8em;
    padding: 0.5em 0.75em;
    border-left: 3px solid <<colour primary>>;
    background: <<colour table-header-background>>;
    border-radius: 0 4px 4px 0;
    font-size: 0.92em;
}
.tc-recipe-photo-advisory > summary {
    cursor: pointer;
    list-style: none;
}
.tc-recipe-photo-advisory > summary::-webkit-details-marker {
    display: none;
}
.tc-recipe-photo-advisory > summary::before {
    content: "▸";
    display: inline-block;
    width: 1em;
    color: <<colour muted-foreground>>;
    transition: transform 0.15s ease;
}
.tc-recipe-photo-advisory[open] > summary::before {
    transform: rotate(90deg);
}
.tc-recipe-photo-advisory ul {
    margin: 0.4em 0;
    padding-left: 1.5em;
}
.tc-recipe-photo-advisory p:last-child {
    margin-bottom: 0;
}
.tc-recipe-photo-edit-section {
    margin: 0 0 1em;
    padding: 0.75em 1em;
    border: 1px solid <<colour table-border>>;
    border-radius: 4px;
}
.tc-recipe-photo-edit-section > strong {
    display: block;
    margin-bottom: 0.75em;
}
.tc-recipe-photo-edit-preview {
    display: flex;
    gap: 1em;
}
.tc-recipe-photo-preview-thumb {
    flex: 0 0 120px;
}
.tc-recipe-photo-preview-thumb img {
    width: 100%;
    height: 100%;
    border-radius: 3px;
    object-fit: cover;
    display: block;
}
.tc-recipe-photo-edit-meta {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    min-width: 0;
}
.tc-recipe-photo-or {
    color: <<colour muted-foreground>>;
    font-size: 0.9em;
}
.tc-recipe-photo-form {
    margin-top: 0.75em;
}
.tc-recipe-photo-form-preview {
    margin-bottom: 0.75em;
}
.tc-recipe-photo-form-preview img {
    max-width: 200px;
    max-height: 150px;
    border-radius: 3px;
    object-fit: cover;
}
.tc-recipe-photo-form-image-row {
    display: flex;
    align-items: center;
    gap: 0.75em;
    flex-wrap: wrap;
    margin-bottom: 0.75em;
}
.tc-recipe-photo-form-image-row input {
    flex: 1;
    min-width: 150px;
}
.tc-recipe-photo-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    margin-bottom: 0.5em;
}
.tc-recipe-photo-form-field label {
    font-size: 0.85em;
    color: <<colour muted-foreground>>;
}
.tc-recipe-photo-form-field input {
    width: 100%;
    box-sizing: border-box;
}
.tc-recipe-photo-form-actions {
    display: flex;
    gap: 0.5em;
    margin-top: 0.75em;
    justify-content: flex-end;
}
.tc-recipe-photo-form-attribution {
    margin: 0.75em 0 0;
    padding: 0.5em 0 0;
    border-top: 1px solid <<colour table-border>>;
}
.tc-recipe-photo-form-attribution > summary {
    cursor: pointer;
    list-style: none;
    font-size: 0.9em;
    user-select: none;
}
.tc-recipe-photo-form-attribution > summary::-webkit-details-marker {
    display: none;
}
.tc-recipe-photo-form-attribution > summary::before {
    content: "\25B8"; /* ▸ */
    display: inline-block;
    width: 1em;
    transition: transform 0.15s ease;
}
.tc-recipe-photo-form-attribution[open] > summary::before {
    transform: rotate(90deg);
}
.tc-recipe-photo-form-attribution[open] > summary {
    margin-bottom: 0.5em;
}
.tc-recipe-photo-mode-options {
    display: flex;
    flex-direction: column;
    gap: 0.4em;
    margin: 0.5em 0 1em;
}
.tc-recipe-photo-save-btn {
    background: <<colour primary>>;
    color: <<colour page-background>>;
    border-color: <<colour primary>>;
}

/* Recipe Box dashboard — horizontal accordion */
.tc-recipe-box-actions {
    overflow: auto;
    margin: 0 0 1.25em;
}
.tc-recipe-box-new-recipe {
    float: right;
    display: inline-flex !important;
    align-items: center;
    gap: 0.4em;
    padding: 0.4em 0.9em !important;
    font-size: 1.35em !important;
    font-weight: 600;
    border: 1px solid <<colour table-border>> !important;
    border-radius: 4px;
    background: <<colour tiddler-background>> !important;
    color: inherit !important;
    cursor: pointer;
}
.tc-recipe-box-new-recipe:hover {
    border-color: <<colour primary>> !important;
    color: <<colour primary>> !important;
}
.tc-recipe-box-new-recipe svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}
.tc-recipe-box {
    display: flex;
    gap: 0.5em;
    margin-bottom: 1em;
    align-items: stretch;
    min-height: 16em;
}
.tc-recipe-box-card {
    border: 1px solid <<colour table-border>>;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: <<colour tiddler-background>>;
    transition: flex-basis 0.2s ease, border-color 0.15s ease;
}
.tc-recipe-box-card-collapsed {
    flex: 0 0 auto;
    max-width: 11em;
}
.tc-recipe-box-card-collapsed:hover {
    border-color: <<colour primary>>;
}
.tc-recipe-box-card-collapsed .tc-recipe-box-card-header::after {
    content: "\25B8"; /* ▸ right-pointing small triangle */
    margin-left: 0.4em;
    color: <<colour muted-foreground>>;
    font-size: 0.85em;
    flex-shrink: 0;
    transition: color 0.15s ease, transform 0.15s ease;
}
.tc-recipe-box-card-collapsed:hover .tc-recipe-box-card-header::after {
    color: <<colour primary>>;
    transform: translateX(2px);
}
.tc-recipe-box-card-expanded {
    flex: 1 1 auto;
    min-width: 0;
}
.tc-recipe-box-card-header {
    display: flex !important;
    align-items: center;
    gap: 0.5em;
    padding: 0.6em 0.8em !important;
    text-align: left;
    width: 100%;
    cursor: pointer;
    font-size: 1em;
    font-weight: 600;
    line-height: 1.2;
    color: inherit !important;
    background: <<colour table-header-background>> !important;
    border: none !important;
    border-bottom: 1px solid <<colour table-border>> !important;
}
.tc-recipe-box-card-expanded .tc-recipe-box-card-header {
    cursor: default;
}
.tc-recipe-box-card-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 0;
}
.tc-recipe-box-card-body {
    padding: 0.8em;
    overflow: auto;
    flex: 1 1 auto;
}
.tc-recipe-box-card-collapsed .tc-recipe-box-card-body {
    overflow: hidden;
}
/* Tags vertical inside Recipe Box */
.tc-recipe-box .tc-recipe-box-tag-pills {
    flex-direction: column;
    align-items: flex-start;
}
.tc-image-recipe-box-card {
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
    color: <<colour muted-foreground>>;
}
.tc-recipe-box-tag-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3em;
}
.tc-recipe-box-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.6em;
}
.tc-recipe-box-tile {
    text-decoration: none;
    color: inherit;
    display: block;
}
.tc-recipe-box-tile:hover {
    text-decoration: none;
}
.tc-recipe-box-tile-photo {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 4px;
    background: <<colour tiddler-background>>;
}
.tc-recipe-box-tile-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tc-recipe-box-tile-photo-placeholder {
    border: 1px dashed <<colour table-border>>;
    background: <<colour page-background>>;
    display: flex;
    align-items: center;
    justify-content: center;
    color: <<colour muted-foreground>>;
}
.tc-image-photo-placeholder {
    width: 40%;
    height: 40%;
    opacity: 0.5;
}
.tc-recipe-box-tile-title {
    display: block;
    font-size: 0.85em;
    margin-top: 0.35em;
    text-align: center;
    line-height: 1.25;
}
.tc-recipe-box-empty {
    color: <<colour muted-foreground>>;
}
.tc-recipe-box-link-list {
    margin: 0;
    padding-left: 1.2em;
    font-size: 0.95em;
}

/* Phone layout: drop the horizontal accordion, show every card in a
   simple 2-column grid with its body always visible.  Triggers on
   portrait phones (any width <=599px) and on phones in landscape
   (<=932px combined with landscape orientation, which excludes iPads
   and other tablets that would otherwise share the wider width). */
@media (max-width: 599px),
       (max-width: 932px) and (orientation: landscape) {
    .tc-recipe-box {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        min-height: 0;
    }
    .tc-recipe-box-card,
    .tc-recipe-box-card-collapsed,
    .tc-recipe-box-card-expanded {
        flex: initial;
        max-width: none;
        min-width: 0;
    }
    .tc-recipe-box-card-collapsed .tc-recipe-box-card-body {
        overflow: visible;
    }
    .tc-recipe-box-card-collapsed .tc-recipe-box-card-header {
        cursor: default;
    }
    .tc-recipe-box-card-collapsed:hover {
        border-color: <<colour table-border>>;
    }
    .tc-recipe-box-card-collapsed .tc-recipe-box-card-header::after {
        content: none;
    }
}

/* Cooking-mode active: hide distractions, boost legibility */
<$list filter="[[$:/state/community/recipes/cooking-mode]get[text]!is[blank]]">
.tc-subtitle,
.tc-tags-wrapper {
    display: none;
}
.tc-tiddler-controls button:not(.tc-recipe-cooking-mode-btn) {
    display: none;
}
/* Exit-cook-mode button is alone in the toolbar — sized to roughly match
   the tiddler title icon (TW core sets that to 0.9em of the surrounding
   titlebar font, and our toolbar button inherits the same context).
   Selector specificity must beat TW's "button svg.tc-image-button" rule. */
.tc-recipe-cooking-mode-btn svg.tc-image-cooking-mode-off-icon {
    width: 1em;
    height: 1em;
}
.tc-hide-sidebar-btn,
.tc-show-sidebar-btn {
    display: none;
}
@media (max-width: 599px) {
    .tc-recipe-ingr-panel {
        display: none;
        margin-bottom: 1em;
    }
    .tc-recipe-ingr-panel.tc-recipe-ingr-visible {
        display: block;
    }
    .tc-recipe-ingr-toggle {
        display: inline-block;
    }
}
.tc-recipe-about {
    display: none;
}
.tc-recipe-split {
    font-size: 1.15em;
    padding-bottom: 4em;
}
.tc-stepview-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.75em 1.5em;
    margin-top: 0;
    border-top: 1px solid <<colour table-border>>;
    box-shadow: 0 -2px 6px rgba(0,0,0,0.08);
}
/* Edge-to-edge: remove page chrome around the tiddler */
.tc-story-river {
    padding: 0 !important;
}
.tc-tiddler-frame {
    margin: 0 !important;
    border-radius: 0;
    box-shadow: none;
    min-height: 100vh;
}
body {
    background-color: <<colour tiddler-background>>;
}
</$list>
