fix: finish dark theme on bsky posts · finxol.io/blog@d3d7834

··· 293 293 opacity: 1; 294 294 transition: opacity 200ms; 295 295 height: fit-content; 296 - z-index: calc(var(--post-z-index) + 1); 297 296 298 297 &:hover { 299 298 opacity: 0.8; ··· 320 319 white-space: nowrap; 321 320 overflow: hidden; 322 321 text-overflow: ellipsis; 323 - z-index: calc(var(--post-z-index) + 1); 324 322 325 323 &:hover { 326 324 text-decoration: underline; ··· 329 327 } 330 328 331 329 .separator { 332 - color: #6b7280; 330 + @apply text-neutral-600 dark:text-neutral-400; 333 331 flex-shrink: 0; 334 332 } 335 333 336 334 .date { 337 - color: #6b7280; 335 + @apply text-neutral-600 dark:text-neutral-400; 338 336 white-space: nowrap; 339 337 flex-shrink: 0; 338 + z-index: var(--post-z-index); 340 339 341 340 &:hover { 342 341 text-decoration: underline; ··· 347 346 display: block; 348 347 position: absolute; 349 348 inset: 0; 350 - z-index: var(--post-z-index); 351 349 } 352 350 } 353 351 ··· 462 460 } 463 461 464 462 .quoted-author-handle { 465 - color: #6b7280; 463 + @apply text-neutral-600 dark:text-neutral-400; 466 464 font-size: 0.75rem; 467 465 } 468 466 469 467 .close-button { 468 + @apply text-neutral-600 dark:text-neutral-400 hover:bg-neutral-700 dark:hover:bg-neutral-700; 469 + display: grid; 470 + place-items: center; 470 471 padding: 0.25rem; 471 472 border: none; 472 473 background: none; 473 474 cursor: pointer; 474 - color: #6b7280; 475 475 font-size: 1.25rem; 476 - line-height: 1; 477 476 border-radius: 0.25rem; 478 477 transition: background-color 200ms; 479 478 480 - &:hover { 481 - background-color: #f3f4f6; 482 - } 483 479 } 484 480 485 481 .dialog-body { ··· 490 486 } 491 487 492 488 .view-on-bsky { 489 + @apply text-neutral-600 dark:text-neutral-400; 493 490 display: inline-flex; 494 491 align-items: center; 495 492 gap: 0.25rem; 496 493 font-size: 0.8125rem; 497 - color: #6b7280; 498 494 499 495 &:hover { 500 496 text-decoration: underline; ··· 525 521 } 526 522 527 523 .stats { 524 + @apply text-neutral-600 dark:text-neutral-400; 528 525 display: flex; 529 526 gap: 1rem; 530 - color: #6b7280; 531 527 font-size: 0.6875rem; 532 528 margin-top: auto; 533 529

+4 -4

app/components/page-elements/BskyPosts.vue

··· 12 12 </div> 13 13 14 14 <div v-else class="posts-scroll"> 15 - <a :href="profileUrl" class="view-more text-gray-500 dark:text-gray-400 border border-gray-200 dark:border-gray-800"> 16 - <span>View more on Bluesky</span> 17 - <Icon name="ri:arrow-right-line" /> 18 - </a> 19 15 <PageElementsBskyFeedPost 20 16 v-for="feedPost in posts" 21 17 :key="feedPost.post.uri" 22 18 :post="feedPost" 23 19 /> 20 + <a :href="profileUrl" class="view-more text-gray-500 dark:text-gray-400 border border-gray-200 dark:border-gray-800"> 21 + <span>View more on Bluesky</span> 22 + <Icon name="ri:arrow-right-line" /> 23 + </a> 24 24 </div> 25 25 </template> 26 26