openvibers/openvibe.live Commits
Phones: 44 px tap targets on the element itself — the easter-egg keypad, the home's legal row, the feed and the Rundown (#640)
Changes
@@@ -510,3 +510,18 @@ a.cf-recap-band:hover .cf-recap-sub { text-decoration: underline; text-underlinebox-shadow: 0 0 0 3px color-mix(in srgb, #fff 22%, transparent), 0 8px 24px rgba(0, 0, 0, .45); }.cf-who-letter { display: grid; place-items: center; width: 30%; max-width: 84px; aspect-ratio: 1; border-radius: 50%; font-size: clamp(1.4rem, 7vw, 2.4rem); font-weight: 800;color: var(--on-accent-strong, var(--on-accent, #fff)); background: var(--accent-strong, var(--accent)); box-shadow: 0 0 0 3px color-mix(in srgb, #fff 18%, transparent), 0 8px 24px rgba(0, 0, 0, .35); }++/* ── Touch (2026-11-06 phone pass, round two) ─────────────────────────────────++ Every control of the feed carries a 44 px hit area on the element itself: the crosslink in the header, the++ filter chips, the sort segments and the three links inside a card (its title, the channel it came from and++ the "read" links). Nothing is hidden to make room — the cards simply get taller. */++@media (pointer: coarse) {++ .cf-crosslink { min-height: 44px; }++ .cf-chip { min-height: 44px; min-width: 44px; }++ .cf-seg button { min-height: 44px; }++ /* The title keeps its own two-line clamp; the padding centres the words in the 44 px box instead of++ leaving the space under them. */++ .cf-title { min-height: 44px; padding: 11px 0; }++ .cf-chan { min-height: 44px; }++ .cf-moment-link { min-height: 44px; }++ .cf-recap-read { min-height: 44px; }++}@@@ -1296,7 +1296,7 @@ body.egg-rainbow { animation: eggRainbow 2.6s linear; }#page-home .hero-latest, #page-home .digest-hot-line { min-height: 44px; display: flex; align-items: center; }#page-home .star-act.star-expand { min-width: 44px; }#page-home .streamer-group-identity, #page-home .hf-who { min-height: 44px; display: flex; align-items: center; }-- #page-home .section-action, #page-home .digest-recap, #page-home .hf-hide, #page-home .hero-philosophy-btn, #page-home .hero-philosophy-link, #page-home .star-name a, #page-home .hero-golive-note a { position: relative; }++ #page-home .section-action, #page-home .digest-recap, #page-home .hf-hide, #page-home .star-name a, #page-home .hero-golive-note a { position: relative; }/* The rail below starts right under its header, and its cards reached into the link's last pixels and took the tapsunder the old hit area (11-03 re-audit: "View all" measured 28 to 32px). The header sits above the rail, and thelink's hit area grows up into the header's own room, never down into the cards: 44px. */@@@ -1305,7 +1305,16 @@ body.egg-rainbow { animation: eggRainbow 2.6s linear; }#page-home .digest-recap::after { content: ''; position: absolute; inset: -8px; }#page-home .hf-hide::after { content: ''; position: absolute; inset: -11px; }/* Text links in a row: taller only, so neighbours never take each other's taps. */-- #page-home .hero-philosophy-btn::after, #page-home .hero-philosophy-link::after, #page-home .star-name a::after, #page-home .hero-golive-note a::after { content: ''; position: absolute; left: 0; right: 0; top: -14px; bottom: -14px; }++ #page-home .star-name a::after, #page-home .hero-golive-note a::after { content: ''; position: absolute; left: 0; right: 0; top: -14px; bottom: -14px; }++ /* Second phone pass (2026-11-06): the legal row's own words carry the 44 px, not an invisible overlay.++ "Terms" and "DMCA" are shorter than a finger, so each link is at least 44 px wide and 44 px tall, with++ the word in the middle of its own box. */++ #page-home .hero-philosophy-btn { min-height: 44px; display: inline-flex; align-items: center; }++ #page-home .hero-philosophy-link { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }++ /* The easter-egg keypad, open: every key is 44 px on the key itself. The letter grid reflows to as many++ 44 px columns as the panel holds (seven on a 390 px phone), so no key is narrower than a fingertip. */++ #page-home .hero-egg-pad-letters { grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); gap: 3px; }++ #page-home .hero-egg-reveal { min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px; }}/* New here? (2026-10-30, the short-pages rule): on a phone the explainer at the foot of the home is a row of tabs and@@@ -239,3 +239,22 @@ a.rd-use:hover b { color: var(--accent); }.rd-more[open] > summary::before { transform: translateY(-4px) rotate(45deg); }.rd-more > .rd-topic-grid { padding: 4px 12px 14px; }@media (prefers-reduced-motion: reduce) { .rd-more > summary::before { transition: none; } }++/* ── Touch (2026-11-06 phone pass, round two) ─────────────────────────────────++ Every control of the Rundown carries a 44 px hit area on the element itself: the tabs, the avatars, the names,++ the watch and read links, the topic chips, the reaction buttons and the speaker buttons. Nothing is hidden to++ make room — the cards simply get taller. */++@media (pointer: coarse) {++ #rundown-root .rd-tab { min-height: 44px; display: inline-flex; align-items: center; }++ /* A linked face only: a face inside another link (the rails) is not a target and keeps its size. */++ #rundown-root a.rd-av { min-width: 44px; min-height: 44px; }++ #rundown-root .rd-user { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; }++ #rundown-root .rd-speak { width: 44px; height: 44px; }++ #rundown-root .rd-react-btn { min-height: 44px; min-width: 44px; }++ #rundown-root .rd-watch { min-height: 44px; }++ #rundown-root .rd-h3 a { min-height: 44px; display: inline-flex; align-items: center; }++ #rundown-root .rd-brief-play { min-height: 44px; }++ #rundown-root .rd-chip { min-height: 44px; }++ #rundown-root .rd-read { min-height: 44px; display: inline-flex; align-items: center; }++ #rundown-root .rd-loadmore { min-height: 44px; }++ #rundown-root .rd-more-link { min-height: 44px; display: inline-flex; align-items: center; }++}@@@ -480,6 +480,12 @@ body.ov-nav-overlay .navbar.ovnav-top {@keyframes eggShakeSlot { 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }.egg-key { min-width: 34px; height: 34px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-tertiary); color: var(--text-primary); font: inherit; font-weight: 800; cursor: pointer; transition: transform var(--ov-dur-1, .1s), background var(--ov-dur-2, .15s), border-color var(--ov-dur-2, .15s); }.egg-key--letter { min-width: 0; height: 30px; padding: 0; font-size: 0.8rem; text-transform: uppercase; }++/* Touch (2026-11-06 phone pass, round two): every key of the easter-egg keypad is a 44 px target on the key++ itself — the four arrows, the two control keys and the 26 letter keys. A mouse keeps the small keys. */++@media (pointer: coarse) {++ .egg-key { min-width: 44px; height: 44px; }++ .egg-key--letter { min-width: 44px; height: 44px; }++}/* Celebration effects */.egg-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 100000; overflow: hidden; }
@@ -510,3 +510,18 @@ a.cf-recap-band:hover .cf-recap-sub { text-decoration: underline; text-underline
@@ -510,3 +510,18 @@ a.cf-recap-band:hover .cf-recap-sub { text-decoration: underline; text-underline
box-shadow: 0 0 0 3px color-mix(in srgb, #fff 22%, transparent), 0 8px 24px rgba(0, 0, 0, .45); }
box-shadow: 0 0 0 3px color-mix(in srgb, #fff 22%, transparent), 0 8px 24px rgba(0, 0, 0, .45); }
.cf-who-letter { display: grid; place-items: center; width: 30%; max-width: 84px; aspect-ratio: 1; border-radius: 50%; font-size: clamp(1.4rem, 7vw, 2.4rem); font-weight: 800;
.cf-who-letter { display: grid; place-items: center; width: 30%; max-width: 84px; aspect-ratio: 1; border-radius: 50%; font-size: clamp(1.4rem, 7vw, 2.4rem); font-weight: 800;
color: var(--on-accent-strong, var(--on-accent, #fff)); background: var(--accent-strong, var(--accent)); box-shadow: 0 0 0 3px color-mix(in srgb, #fff 18%, transparent), 0 8px 24px rgba(0, 0, 0, .35); }
color: var(--on-accent-strong, var(--on-accent, #fff)); background: var(--accent-strong, var(--accent)); box-shadow: 0 0 0 3px color-mix(in srgb, #fff 18%, transparent), 0 8px 24px rgba(0, 0, 0, .35); }
+/* ── Touch (2026-11-06 phone pass, round two) ─────────────────────────────────
+ Every control of the feed carries a 44 px hit area on the element itself: the crosslink in the header, the
+ filter chips, the sort segments and the three links inside a card (its title, the channel it came from and
+ the "read" links). Nothing is hidden to make room — the cards simply get taller. */
+@media (pointer: coarse) {
+ .cf-crosslink { min-height: 44px; }
+ .cf-chip { min-height: 44px; min-width: 44px; }
+ .cf-seg button { min-height: 44px; }
+ /* The title keeps its own two-line clamp; the padding centres the words in the 44 px box instead of
+ leaving the space under them. */
+ .cf-title { min-height: 44px; padding: 11px 0; }
+ .cf-chan { min-height: 44px; }
+ .cf-moment-link { min-height: 44px; }
+ .cf-recap-read { min-height: 44px; }
+}
@@ -1296,7 +1296,7 @@ body.egg-rainbow { animation: eggRainbow 2.6s linear; }
@@ -1296,7 +1296,7 @@ body.egg-rainbow { animation: eggRainbow 2.6s linear; }
#page-home .hero-latest, #page-home .digest-hot-line { min-height: 44px; display: flex; align-items: center; }
#page-home .hero-latest, #page-home .digest-hot-line { min-height: 44px; display: flex; align-items: center; }
#page-home .star-act.star-expand { min-width: 44px; }
#page-home .star-act.star-expand { min-width: 44px; }
#page-home .streamer-group-identity, #page-home .hf-who { min-height: 44px; display: flex; align-items: center; }
#page-home .streamer-group-identity, #page-home .hf-who { min-height: 44px; display: flex; align-items: center; }
- #page-home .section-action, #page-home .digest-recap, #page-home .hf-hide, #page-home .hero-philosophy-btn, #page-home .hero-philosophy-link, #page-home .star-name a, #page-home .hero-golive-note a { position: relative; }
+ #page-home .section-action, #page-home .digest-recap, #page-home .hf-hide, #page-home .star-name a, #page-home .hero-golive-note a { position: relative; }
/* The rail below starts right under its header, and its cards reached into the link's last pixels and took the taps
/* The rail below starts right under its header, and its cards reached into the link's last pixels and took the taps
under the old hit area (11-03 re-audit: "View all" measured 28 to 32px). The header sits above the rail, and the
under the old hit area (11-03 re-audit: "View all" measured 28 to 32px). The header sits above the rail, and the
link's hit area grows up into the header's own room, never down into the cards: 44px. */
link's hit area grows up into the header's own room, never down into the cards: 44px. */
@@ -1305,7 +1305,16 @@ body.egg-rainbow { animation: eggRainbow 2.6s linear; }
@@ -1305,7 +1305,16 @@ body.egg-rainbow { animation: eggRainbow 2.6s linear; }
#page-home .digest-recap::after { content: ''; position: absolute; inset: -8px; }
#page-home .digest-recap::after { content: ''; position: absolute; inset: -8px; }
#page-home .hf-hide::after { content: ''; position: absolute; inset: -11px; }
#page-home .hf-hide::after { content: ''; position: absolute; inset: -11px; }
/* Text links in a row: taller only, so neighbours never take each other's taps. */
/* Text links in a row: taller only, so neighbours never take each other's taps. */
- #page-home .hero-philosophy-btn::after, #page-home .hero-philosophy-link::after, #page-home .star-name a::after, #page-home .hero-golive-note a::after { content: ''; position: absolute; left: 0; right: 0; top: -14px; bottom: -14px; }
+ #page-home .star-name a::after, #page-home .hero-golive-note a::after { content: ''; position: absolute; left: 0; right: 0; top: -14px; bottom: -14px; }
+ /* Second phone pass (2026-11-06): the legal row's own words carry the 44 px, not an invisible overlay.
+ "Terms" and "DMCA" are shorter than a finger, so each link is at least 44 px wide and 44 px tall, with
+ the word in the middle of its own box. */
+ #page-home .hero-philosophy-btn { min-height: 44px; display: inline-flex; align-items: center; }
+ #page-home .hero-philosophy-link { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
+ /* The easter-egg keypad, open: every key is 44 px on the key itself. The letter grid reflows to as many
+ 44 px columns as the panel holds (seven on a 390 px phone), so no key is narrower than a fingertip. */
+ #page-home .hero-egg-pad-letters { grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); gap: 3px; }
+ #page-home .hero-egg-reveal { min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px; }
}
}
/* New here? (2026-10-30, the short-pages rule): on a phone the explainer at the foot of the home is a row of tabs and
/* New here? (2026-10-30, the short-pages rule): on a phone the explainer at the foot of the home is a row of tabs and
@@ -239,3 +239,22 @@ a.rd-use:hover b { color: var(--accent); }
@@ -239,3 +239,22 @@ a.rd-use:hover b { color: var(--accent); }
.rd-more[open] > summary::before { transform: translateY(-4px) rotate(45deg); }
.rd-more[open] > summary::before { transform: translateY(-4px) rotate(45deg); }
.rd-more > .rd-topic-grid { padding: 4px 12px 14px; }
.rd-more > .rd-topic-grid { padding: 4px 12px 14px; }
@media (prefers-reduced-motion: reduce) { .rd-more > summary::before { transition: none; } }
@media (prefers-reduced-motion: reduce) { .rd-more > summary::before { transition: none; } }
+/* ── Touch (2026-11-06 phone pass, round two) ─────────────────────────────────
+ Every control of the Rundown carries a 44 px hit area on the element itself: the tabs, the avatars, the names,
+ the watch and read links, the topic chips, the reaction buttons and the speaker buttons. Nothing is hidden to
+ make room — the cards simply get taller. */
+@media (pointer: coarse) {
+ #rundown-root .rd-tab { min-height: 44px; display: inline-flex; align-items: center; }
+ /* A linked face only: a face inside another link (the rails) is not a target and keeps its size. */
+ #rundown-root a.rd-av { min-width: 44px; min-height: 44px; }
+ #rundown-root .rd-user { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; }
+ #rundown-root .rd-speak { width: 44px; height: 44px; }
+ #rundown-root .rd-react-btn { min-height: 44px; min-width: 44px; }
+ #rundown-root .rd-watch { min-height: 44px; }
+ #rundown-root .rd-h3 a { min-height: 44px; display: inline-flex; align-items: center; }
+ #rundown-root .rd-brief-play { min-height: 44px; }
+ #rundown-root .rd-chip { min-height: 44px; }
+ #rundown-root .rd-read { min-height: 44px; display: inline-flex; align-items: center; }
+ #rundown-root .rd-loadmore { min-height: 44px; }
+ #rundown-root .rd-more-link { min-height: 44px; display: inline-flex; align-items: center; }
+}
@@ -480,6 +480,12 @@ body.ov-nav-overlay .navbar.ovnav-top {
@@ -480,6 +480,12 @@ body.ov-nav-overlay .navbar.ovnav-top {
@keyframes eggShakeSlot { 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
@keyframes eggShakeSlot { 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
.egg-key { min-width: 34px; height: 34px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-tertiary); color: var(--text-primary); font: inherit; font-weight: 800; cursor: pointer; transition: transform var(--ov-dur-1, .1s), background var(--ov-dur-2, .15s), border-color var(--ov-dur-2, .15s); }
.egg-key { min-width: 34px; height: 34px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-tertiary); color: var(--text-primary); font: inherit; font-weight: 800; cursor: pointer; transition: transform var(--ov-dur-1, .1s), background var(--ov-dur-2, .15s), border-color var(--ov-dur-2, .15s); }
.egg-key--letter { min-width: 0; height: 30px; padding: 0; font-size: 0.8rem; text-transform: uppercase; }
.egg-key--letter { min-width: 0; height: 30px; padding: 0; font-size: 0.8rem; text-transform: uppercase; }
+/* Touch (2026-11-06 phone pass, round two): every key of the easter-egg keypad is a 44 px target on the key
+ itself — the four arrows, the two control keys and the 26 letter keys. A mouse keeps the small keys. */
+@media (pointer: coarse) {
+ .egg-key { min-width: 44px; height: 44px; }
+ .egg-key--letter { min-width: 44px; height: 44px; }
+}
/* Celebration effects */
/* Celebration effects */
.egg-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 100000; overflow: hidden; }
.egg-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 100000; overflow: hidden; }