+63 -61

src/components/status.css

reviewed

··· 1330 1330 1331 1331 @keyframes media-carousel-slide { 1332 1332 0% { 1333 1333 - transform: translateX(calc(var(--dots-count, 1) * 5px)); 1333 1333 + transform: translateX(calc(var(--dots-count, 1) * 2.5px)); 1334 1334 } 1335 1335 100% { 1336 1336 - transform: translateX(calc(var(--dots-count, 1) * -5px)); 1336 1336 + transform: translateX(calc(var(--dots-count, 1) * -2.5px)); 1337 1337 } 1338 1338 } 1339 1339 ··· 1371 1371 .media-first-spoiler-button { 1372 1372 display: inline-flex !important; 1373 1373 } 1374 1374 + 1374 1375 .media-first-container { 1376 1376 + position: relative; 1377 1377 + 1378 1378 + .media-carousel-controls { 1379 1379 + flex-shrink: 0; 1380 1380 + position: absolute; 1381 1381 + inset: 0; 1382 1382 + pointer-events: none; 1383 1383 + display: flex; 1384 1384 + justify-content: space-between; 1385 1385 + } 1386 1386 + 1387 1387 + .carousel-indexer { 1388 1388 + z-index: 1; 1389 1389 + position: absolute; 1390 1390 + top: 8px; 1391 1391 + right: 8px; 1392 1392 + color: var(--media-fg-color); 1393 1393 + background-color: var(--media-bg-color); 1394 1394 + padding: 2px 8px; 1395 1395 + border-radius: 16px; 1396 1396 + font-size: 0.8em; 1397 1397 + font-variant-numeric: tabular-nums; 1398 1398 + opacity: 0.6; 1399 1399 + transition: opacity 1s ease-in-out 0.3s; 1400 1400 + border: var(--hairline-width) solid var(--media-outline-color); 1401 1401 + } 1402 1402 + 1403 1403 + .media-carousel-button { 1404 1404 + display: flex; 1405 1405 + flex-shrink: 0; 1406 1406 + padding-inline: 8px; 1407 1407 + margin-block: 3em; 1408 1408 + pointer-events: auto; 1409 1409 + cursor: pointer; 1410 1410 + align-items: center; 1411 1411 + justify-content: center; 1412 1412 + } 1413 1413 + .carousel-button { 1414 1414 + @media (pointer: coarse) { 1415 1415 + display: none; 1416 1416 + } 1417 1417 + 1418 1418 + + .carousel-button { 1419 1419 + left: auto; 1420 1420 + right: 8px; 1421 1421 + } 1422 1422 + } 1423 1423 + 1424 1424 + @media (hover: hover) and (pointer: fine) { 1425 1425 + .carousel-button { 1426 1426 + filter: opacity(0); 1427 1427 + } 1428 1428 + &:hover .carousel-button { 1429 1429 + filter: opacity(1); 1430 1430 + } 1431 1431 + } 1432 1432 + } 1433 1433 + 1434 1434 + .media-first-carousel { 1375 1435 margin-top: 8px; 1376 1436 display: flex; 1377 1437 max-height: 80vh; ··· 1381 1441 scroll-behavior: smooth; 1382 1442 user-select: none; 1383 1443 margin-inline: -16px; 1384 1384 - position: relative; 1385 1444 scrollbar-width: none; 1386 1445 /* border: var(--hairline-width) solid var(--outline-color); 1387 1446 border-inline-width: 0; ··· 1442 1501 } 1443 1502 } 1444 1503 } 1445 1445 - 1446 1446 - .media-carousel-controls { 1447 1447 - flex-shrink: 0; 1448 1448 - width: 100%; 1449 1449 - position: sticky; 1450 1450 - right: 0; 1451 1451 - left: 0; 1452 1452 - pointer-events: none; 1453 1453 - display: flex; 1454 1454 - justify-content: space-between; 1455 1455 - } 1456 1456 - 1457 1457 - .carousel-indexer { 1458 1458 - z-index: 1; 1459 1459 - position: absolute; 1460 1460 - top: 8px; 1461 1461 - right: 8px; 1462 1462 - color: var(--media-fg-color); 1463 1463 - background-color: var(--media-bg-color); 1464 1464 - padding: 2px 8px; 1465 1465 - border-radius: 16px; 1466 1466 - font-size: 0.8em; 1467 1467 - font-variant-numeric: tabular-nums; 1468 1468 - opacity: 0.6; 1469 1469 - transition: opacity 1.5s ease-in-out; 1470 1470 - border: var(--hairline-width) solid var(--media-outline-color); 1471 1471 - } 1472 1472 - 1473 1473 - .media-carousel-button { 1474 1474 - display: flex; 1475 1475 - flex-shrink: 0; 1476 1476 - padding-inline: 8px; 1477 1477 - margin-block: 3em; 1478 1478 - pointer-events: auto; 1479 1479 - cursor: pointer; 1480 1480 - align-items: center; 1481 1481 - justify-content: center; 1482 1482 - } 1483 1483 - .carousel-button { 1484 1484 - @media (pointer: coarse) { 1485 1485 - display: none; 1486 1486 - } 1487 1487 - 1488 1488 - + .carousel-button { 1489 1489 - left: auto; 1490 1490 - right: 8px; 1491 1491 - } 1492 1492 - } 1493 1493 - 1494 1494 - @media (hover: hover) and (pointer: fine) { 1495 1495 - .carousel-button { 1496 1496 - filter: opacity(0); 1497 1497 - } 1498 1498 - &:hover .carousel-button { 1499 1499 - filter: opacity(1); 1500 1500 - } 1501 1501 - } 1502 1504 } 1503 1505 :is(:hover, :focus) > & .carousel-indexer { 1504 1506 opacity: 0; ··· 1513 1515 padding: 8px; 1514 1516 1515 1517 @supports (animation-timeline: scroll()) { 1516 1516 - animation: auto media-carousel-slide linear both; 1518 1518 + animation: media-carousel-slide 1s linear both; 1517 1519 animation-timeline: --media-carousel; 1518 1520 } 1519 1521

+12 -10

src/components/status.jsx

reviewed

··· 2292 2292 2293 2293 return ( 2294 2294 <> 2295 2295 - <div class="media-first-container" ref={carouselRef}> 2296 2296 - {mediaAttachments.map((media, i) => ( 2297 2297 - <div class="media-first-item" key={media.id}> 2298 2298 - <Media 2299 2299 - media={media} 2300 2300 - lang={language} 2301 2301 - to={`/${instance}/s/${postID}?media=${i + 1}`} 2302 2302 - /> 2303 2303 - </div> 2304 2304 - ))} 2295 2295 + <div class="media-first-container"> 2296 2296 + <div class="media-first-carousel" ref={carouselRef}> 2297 2297 + {mediaAttachments.map((media, i) => ( 2298 2298 + <div class="media-first-item" key={media.id}> 2299 2299 + <Media 2300 2300 + media={media} 2301 2301 + lang={language} 2302 2302 + to={`/${instance}/s/${postID}?media=${i + 1}`} 2303 2303 + /> 2304 2304 + </div> 2305 2305 + ))} 2306 2306 + </div> 2305 2307 {moreThanOne && ( 2306 2308 <div class="media-carousel-controls"> 2307 2309 <div class="carousel-indexer">