openvibers/openvibe.vip Commits

Phones: the four numbers two by two, every @name and each fold's line shown (#163)

OP OpenVibers committed 11 days ago · 6f3c81a80c · 1 file, +13 −5

Changes

ddiff --git a/public/css/vip.css b/public/css/vip.css
iindex 5d7ae58..39fee3e 100644
---- a/public/css/vip.css
++++ b/public/css/vip.css
@@@ -101,6 +101,10 @@ code { background: color-mix(in srgb, var(--text-primary, #fff) 6%, transparent)
.vip-fold { border: 1px solid var(--border, #1f2d47); border-radius: 16px; background: var(--bg-secondary, #101828); }
.vip-fold > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 0 18px; cursor: pointer; list-style: none; }
.vip-fold > summary::-webkit-details-marker { display: none; }
++/* It says it opens: + closed, − open, as the network's other folds do. */
++.vip-fold > summary { position: relative; padding-right: 48px; }
++.vip-fold > summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 1.25rem; font-weight: 700; line-height: 1; color: var(--text-muted, #7386a3); }
++.vip-fold[open] > summary::after { content: "\2212"; }
.vip-fold > summary h2 { margin: 0; }
.vip-fold > summary span { color: var(--text-muted, #7386a3); font-weight: 600; font-size: .86rem; text-align: right; }
.vip-fold > summary:focus-visible { outline: 2px solid var(--accent, #3b82f6); outline-offset: -2px; border-radius: 16px; }
@@@ -110,15 +114,19 @@ code { background: color-mix(in srgb, var(--text-primary, #fff) 6%, transparent)
.creator-list > li { margin: 0; min-width: 0; }
.creator-list a { min-height: 48px; padding: 8px 10px; gap: 8px; }
.creator-list .vip-avatar { width: 28px; height: 28px; }
-- .creator-list .vip-creator-text .muted { display: none; }
-- .creator-list .vip-creator-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-- .vip-stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(124px, 1fr); grid-template-columns: none; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 0 16px 2px; }
-- .vip-stats::-webkit-scrollbar { display: none; }
++ /* The @name stays, a size down, under the name (it was hidden: the owner's rule is never to hide to shorten). */
++ .creator-list .vip-creator-text { display: grid; min-width: 0; }
++ .creator-list .vip-creator-text b, .creator-list .vip-creator-text .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
++ .creator-list .vip-creator-text .muted { font-size: .74rem; }
++ /* The four numbers two by two: all of them on the screen, none behind a sideways scroll a keyboard could not reach. */
++ .vip-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.vip-stats dt, .vip-stats dd { overflow-wrap: normal; word-break: normal; }
.vip-stats > div { padding: 10px 12px; }
.vip-stats dt { font-size: 1.05rem; }
.vip-stats dd { font-size: .76rem; line-height: 1.35; }
-- .vip-fold > summary span { display: none; }
++ /* A fold's line says what it holds, under its heading on a phone (it was hidden). */
++ .vip-fold > summary { flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 12px 48px 12px 18px; }
++ .vip-fold > summary span { flex-basis: 100%; text-align: left; font-size: .8rem; }
}
/* Touch targets on phones (fleet audit, 2026-10-29): touch pointers only. */