Something went wrong. Try again.
A Bsky-like frontend using the atprotocol natively.
Something went wrong. Try again.
12 kB · 716 lines
CSS
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717
.embed-images { display: grid; gap: 3px; border-radius: 12px; overflow: hidden; margin-top: 10px; height: 280px;}
.embed-images--1 { grid-template-columns: 1fr; height: 320px;}
.embed-images--2 { grid-template-columns: 1fr 1fr;}
.embed-images--3 { grid-template-columns: 1fr 1fr;}
.embed-images--3 .embed-image-link:first-child { grid-row: 1 / -1;}
.embed-images--4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;}
.embed-image-link { display: block; overflow: hidden; border: none; padding: 0; margin: 0; background: none; cursor: pointer; width: 100%; height: 100%; -webkit-tap-highlight-color: transparent;}
.embed-image { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter 0.15s, transform 0.15s;}
.embed-image-link:hover .embed-image { filter: brightness(0.88); transform: scale(1.02);}
.embed-image-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px;}
.lightbox-backdrop { position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, 0.92); display: flex; align-items: center; justify-content: center; animation: lightbox-fade-in 0.2s ease-out; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: none;}
@keyframes lightbox-fade-in { from { opacity: 0; } to { opacity: 1; }}
.lightbox-close { position: absolute; top: 16px; right: 16px; z-index: 10; background: rgba(255, 255, 255, 0.1); border: none; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; transition: background 0.15s; padding: 0;}
.lightbox-close svg { font-size: 20px; width: 20px; height: 20px;}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.2);}
.lightbox-counter { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); z-index: 10; color: rgba(255, 255, 255, 0.7); font-size: 14px; font-weight: 500; pointer-events: none; user-select: none;}
.lightbox-zoom-indicator { position: absolute; top: 20px; right: 72px; z-index: 10; background: rgba(0, 0, 0, 0.55); color: rgba(255, 255, 255, 0.8); font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 12px; pointer-events: none; user-select: none; font-variant-numeric: tabular-nums; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);}
.lightbox-image-container {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none;}
.lightbox-image { max-width: calc(100vw - 80px); max-height: calc(100vh - 80px); object-fit: contain; border-radius: 4px; opacity: 0; transition: opacity 0.25s ease; transform-origin: center center; will-change: transform;
overflow: visible;}
.lightbox-image--loaded { opacity: 1;}
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; background: rgba(255, 255, 255, 0.1); border: none; border-radius: 50%; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; transition: background 0.15s, opacity 0.2s; padding: 0; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);}
.lightbox-nav svg { font-size: 22px; width: 22px; height: 22px;}
.lightbox-nav:hover { background: rgba(255, 255, 255, 0.22);}
.lightbox-nav--prev { left: 16px;}
.lightbox-nav--next { right: 16px;}
.lightbox-alt { position: absolute; bottom: 0; left: 0; right: 0; z-index: 10; background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); color: rgba(255, 255, 255, 0.85); font-size: 13px; line-height: 1.4; padding: 24px 20px 16px; white-space: pre-wrap; word-break: break-word;}
.embed-external { display: flex; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-top: 10px; text-decoration: none; color: inherit; transition: background 0.15s;}
.embed-external:hover { background: var(--hover-bg); text-decoration: none;}
.embed-external-thumb { width: 120px; min-height: 100%; object-fit: cover; flex-shrink: 0;}
.embed-external-info { padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0;}
.embed-external-title { font-size: 14px; font-weight: 600; color: var(--text-h); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.embed-external-desc { font-size: 13px; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.embed-external-url { font-size: 12px; color: var(--text); margin-top: 2px;}
.embed-quote { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin-top: 10px; cursor: pointer; transition: background 0.15s; display: block; text-decoration: none; color: inherit;}
.embed-quote:hover { background: var(--hover-bg);}
.embed-quote-header { display: flex; align-items: center; gap: 6px; margin-bottom: 4px;}
.embed-quote-avatar { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex-shrink: 0;}
.embed-quote-avatar-placeholder { width: 20px; height: 20px; border-radius: 50%; background: var(--accent-bg); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--accent); flex-shrink: 0;}
.embed-quote-name { font-size: 13px; font-weight: 600; color: var(--text-h); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.embed-quote-handle { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.embed-quote-text { font-size: 14px; line-height: 1.4; color: var(--text-h); white-space: pre-wrap; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;}
.embed-quote-text .post-body-link { color: var(--accent); text-decoration: none; cursor: pointer;}
.embed-quote-text .post-body-link:hover { text-decoration: underline;}
.embed-quote-text .post-body-url { word-break: break-all;}
.embed-record-with-media { margin-top: 10px; display: flex; flex-direction: column;}
.embed-record-with-media .embed-images,.embed-record-with-media .embed-video,.embed-record-with-media .embed-external,.embed-record-with-media .embed-gif { margin-top: 0; margin-bottom: 2px; border-radius: 12px 12px 0 0;}
.embed-record-with-media .embed-quote { margin-top: 0; border-radius: 0 0 12px 12px; border-top: none;}
.embed-video { margin-top: 10px; border-radius: 12px; overflow: hidden; background: #000; max-height: 400px; min-width: 280px; position: relative; cursor: pointer; user-select: none;}
.embed-video:fullscreen,.embed-video--fullscreen { max-height: none !important; border-radius: 0; margin-top: 0; width: 100vw; height: 100vh; aspect-ratio: auto !important; display: flex; align-items: center; justify-content: center; background: #000;}
.embed-video:fullscreen .embed-video-player,.embed-video--fullscreen .embed-video-player { max-height: none; max-width: 100%; width: 100%; height: 100%; object-fit: contain;}
.embed-video-player { width: 100%; height: 100%; display: block; max-height: 400px;}
.embed-video-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; border: none; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, transform 0.15s; z-index: 3; padding: 0;}
.embed-video-play-btn:hover { background: rgba(0, 0, 0, 0.8); transform: translate(-50%, -50%) scale(1.08);}
.embed-video-controls { position: absolute; bottom: 0; left: 0; right: 0; z-index: 4; background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); padding: 20px 10px 8px; opacity: 0; transition: opacity 0.25s ease; pointer-events: none;}
.embed-video-controls--visible { opacity: 1; pointer-events: auto;}
.embed-video-seek { width: 100%; height: 4px; background: rgba(255, 255, 255, 0.2); border-radius: 2px; cursor: pointer; position: relative; margin-bottom: 8px; transition: height 0.15s;}
.embed-video:hover .embed-video-seek,.embed-video-controls--visible .embed-video-seek { height: 5px;}
.embed-video-seek-buffered { position: absolute; top: 0; left: 0; height: 100%; background: rgba(255, 255, 255, 0.3); border-radius: 2px; pointer-events: none;}
.embed-video-seek-progress { position: absolute; top: 0; left: 0; height: 100%; background: var(--accent, #1185fe); border-radius: 2px; pointer-events: none;}
.embed-video-seek-thumb { position: absolute; top: 50%; width: 12px; height: 12px; background: var(--accent, #1185fe); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; opacity: 0; transition: opacity 0.15s;}
.embed-video:hover .embed-video-seek-thumb,.embed-video-controls--visible .embed-video-seek-thumb { opacity: 1;}
.embed-video-controls-row { display: flex; align-items: center; gap: 8px;}
.embed-video-ctrl-btn { background: none; border: none; color: #fff; font-size: 14px; cursor: pointer; padding: 4px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 4px; transition: background 0.15s; flex-shrink: 0;}
.embed-video-ctrl-btn:hover { background: rgba(255, 255, 255, 0.15);}
.embed-video-time { color: rgba(255, 255, 255, 0.85); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; min-width: 68px;}
.embed-video-volume-slider { width: 60px; height: 4px; background: rgba(255, 255, 255, 0.2); border-radius: 2px; cursor: pointer; position: relative; flex-shrink: 0; transition: height 0.15s;}
.embed-video:hover .embed-video-volume-slider { height: 5px;}
.embed-video-volume-fill { position: absolute; top: 0; left: 0; height: 100%; background: #fff; border-radius: 2px; pointer-events: none;}
.embed-video-volume-thumb { position: absolute; top: 50%; width: 10px; height: 10px; background: #fff; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; opacity: 0; transition: opacity 0.15s;}
.embed-video:hover .embed-video-volume-thumb { opacity: 1;}
.embed-gif { display: block; margin-top: 10px; border-radius: 12px; overflow: hidden; text-decoration: none; max-height: 400px; position: relative;}
.embed-gif-img { width: 100%; max-height: 400px; object-fit: cover; display: block; transition: filter 0.15s;}
a.embed-gif:hover .embed-gif-img { filter: brightness(0.9);}
.embed-gif--paused { cursor: pointer; border: none; padding: 0; background: none; -webkit-tap-highlight-color: transparent;}
.embed-gif--paused .embed-gif-img {
filter: brightness(0.85);}
.embed-gif--paused:hover .embed-gif-img { filter: brightness(0.75);}
.embed-gif-badge { position: absolute; top: 8px; left: 8px; background: rgba(0, 0, 0, 0.65); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 4px; letter-spacing: 0.5px; pointer-events: none;}
.embed-gif-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 18px; display: flex; align-items: center; justify-content: center; pointer-events: none; transition: background 0.15s, transform 0.15s;}
.embed-gif--paused:hover .embed-gif-play { background: rgba(0, 0, 0, 0.8); transform: translate(-50%, -50%) scale(1.08);}
.embed-unavailable { margin-top: 10px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px; font-size: 13px; color: var(--text);}