openvibers/openvibe.vip Commits
Phones: the four numbers two by two, every @name and each fold's line shown (#163)
Changes
@@@ -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. */
@@ -101,6 +101,10 @@ code { background: color-mix(in srgb, var(--text-primary, #fff) 6%, transparent)
@@ -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 { 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 { 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; }
.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 h2 { margin: 0; }
.vip-fold > summary span { color: var(--text-muted, #7386a3); font-weight: 600; font-size: .86rem; text-align: right; }
.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; }
.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)
@@ -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 > li { margin: 0; min-width: 0; }
.creator-list a { min-height: 48px; padding: 8px 10px; gap: 8px; }
.creator-list a { min-height: 48px; padding: 8px 10px; gap: 8px; }
.creator-list .vip-avatar { width: 28px; height: 28px; }
.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 dt, .vip-stats dd { overflow-wrap: normal; word-break: normal; }
.vip-stats > div { padding: 10px 12px; }
.vip-stats > div { padding: 10px 12px; }
.vip-stats dt { font-size: 1.05rem; }
.vip-stats dt { font-size: 1.05rem; }
.vip-stats dd { font-size: .76rem; line-height: 1.35; }
.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. */
/* Touch targets on phones (fleet audit, 2026-10-29): touch pointers only. */