openvibers/openvibe.design Commits

On a phone a fold is a card row, not a bare triangle (#143)

OP OpenVibers committed 10 days ago · 4877d3923b · 1 file, +16 −0

The folds had no style of their own on a phone and fell back to the browser's disclosure triangle, with the count on
its own line. Under 640 px a fold is now a card: the heading on the left, what it holds counted on the right, the
content 16px inside when open. Wider screens are unchanged.

Changes

ddiff --git a/public/css/design.css b/public/css/design.css
iindex ddbf958..cdc4ebf 100644
---- a/public/css/design.css
++++ b/public/css/design.css
@@@ -708,3 +708,19 @@ html.ar-fit .ar-shot--desktop .ar-shot-frame, html.ar-fit .ar-shot--desktop::bef
  .dv-live, .dv-ok, .dv-err { margin: 8px 0; font-size: .9rem; overflow-wrap: anywhere; }
  .dv-ok { padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, #22c55e 14%, transparent); }
  .dv-err { padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, #ef4444 14%, transparent); }
++
++/* On a phone a fold is a card row (11-03): its heading, what it holds counted on the right, no browser triangle; open,
++   its content sits inside the card. A wider screen shows the section as before. */
++@media (max-width: 640px) {
++  .ds-fold-block { border: 1px solid var(--border, #1f2d47); border-radius: 14px; background: var(--bg-card, #131c2e); }
++  .ds-fold-block > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 4px 16px; cursor: pointer; list-style: none; }
++  .ds-fold-block > summary::-webkit-details-marker { display: none; }
++  .ds-fold-block > summary::marker { content: ''; }
++  .ds-fold-block > summary h2 { margin: 0; padding: 0; border: 0; font-size: 1.12rem; }
++  .ds-fold-block > summary span { flex: none; color: var(--text-muted, #7386a3); font-weight: 600; font-size: .86rem; white-space: nowrap; }
++  .ds-fold-block > summary:focus-visible { outline: 2px solid var(--accent, #3b82f6); outline-offset: -2px; border-radius: 14px; }
++  /* The content sits 16px inside the card, whatever spacing its own section had for a page without a card. */
++  .ds-fold-block > summary ~ * { margin-left: 0 !important; margin-right: 0 !important; padding-left: 16px !important; padding-right: 16px !important; }
++  .ds-fold-block > summary + * { margin-top: 0 !important; padding-top: 4px !important; }
++  .ds-fold-block[open] { padding-bottom: 12px; }
++}