Something went wrong. Try again.
A minimalistic opinionated Bluesky web client
Something went wrong. Try again.
23 kB · 1090 lines
CSS
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091#compose-container-outer { width: 100%; height: 100vh; height: 100dvh; overflow: auto; align-self: flex-start; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);}
#compose-container { margin: auto; width: var(--main-width); max-width: 100%; align-self: stretch; animation: fade-in 0.2s ease-out;}
#compose-container .compose-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 8px; position: sticky; top: 0; z-index: 100; white-space: nowrap;
@media (min-width: 480px) { padding-block: 16px; }
.compose-controls { display: flex; background-color: var(--bg-faded-blur-color); backdrop-filter: blur(16px); border-radius: 9999px; border: 2px solid var(--bg-faded-color);
button:is(:hover, :focus) { background-color: var(--bg-blur-color); } }}#compose-container .compose-top .account-block { text-align: start; pointer-events: none; overflow: hidden; color: var(--text-insignificant-color); line-height: 1.1; font-size: 90%; background-color: var(--bg-faded-blur-color); backdrop-filter: blur(16px); padding-inline-end: 1em; border-radius: 9999px; border: 2px solid var(--bg-faded-color);}
@keyframes appear-up { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); }}#compose-container .status-preview { border-radius: 16px 16px 0 0; max-height: 160px; background-color: var(--bg-color); margin: 0 8px; border: 1px solid var(--outline-color); border-bottom: 0; animation: appear-up 1s ease-in-out; overflow: auto; box-shadow: 0 0px 12px -6px var(--drop-shadow-color); display: flex; flex-direction: column; overflow: auto;
> .status { font-size: calc(var(--text-size) * 0.9); }}#compose-container .status-preview:has(.status-badge:not(:empty)) { border-start-end-radius: 8px;}#compose-container .status-preview :is(.content-container, .time) { pointer-events: none;}#compose-container.standalone .status-preview .status { /* For standalone mode (new window), prevent interacting with the status preview for now */ pointer-events: none;}
#compose-container .status-preview-legend { color: var(--text-insignificant-color); cursor: pointer; list-style-type: ' ▼ '; order: 1; /* pointer-events: none; */ bottom: 0; padding: 8px; font-size: 80%; font-weight: bold; text-align: center;
strong { color: var(--red-color); }
&:is(:hover, :focus) { color: var(--text-color); }}#compose-container .status-preview[open] .status-preview-legend { list-style-type: ' ▲ '; position: sticky; background-color: var(--bg-blur-color); border-top: var(--hairline-width) solid var(--outline-color); backdrop-filter: blur(8px); text-shadow: 0 1px 10px var(--bg-color), 0 1px 10px var(--bg-color), 0 1px 10px var(--bg-color), 0 1px 10px var(--bg-color), 0 1px 10px var(--bg-color); z-index: 2;}#_compose-container .status-preview-legend.reply-to { color: var(--reply-to-color); background-color: var(--reply-to-faded-color); /* background-image: linear-gradient( to bottom, transparent, var(--reply-to-faded-color) ); */}
#compose-container form { --form-spacing-inline: 0; --form-spacing-block: 8px; padding: var(--form-spacing-block) var(--form-spacing-inline); background-color: var(--bg-blur-color); position: relative; z-index: 2; --drop-shadow: 0 3px 6px -4px var(--drop-shadow-color); box-shadow: var(--drop-shadow); display: flex; flex-direction: column; gap: var(--form-spacing-block);
@media (min-width: 40em) { --form-spacing-inline: 8px; border-radius: 16px; border-start-start-radius: 8px; border-start-end-radius: 8px; }}#compose-container .status-preview ~ form { box-shadow: var(--drop-shadow), 0 -3px 6px -3px var(--drop-shadow-color);}
#compose-container .compose-field { width: 100%; max-width: 100%; line-height: 1.4; border-color: transparent; height: 4em; min-height: 4em; max-height: 50vh; resize: vertical;
border-radius: 0; &:hover { border-color: var(--divider-color); }
&:lang(mn-Mong) { height: auto !important; max-height: 50vh !important; writing-mode: vertical-lr; }
@media (min-width: 40em) { max-height: 65vh; border-radius: 4px; }}
#compose-container .toolbar { display: flex; justify-content: space-between; align-items: center; gap: 4px; padding-inline: 8px;
@media (min-width: 40em) { padding-inline: 0; }}#compose-container .toolbar.wrap { flex-wrap: wrap;}#compose-container .toolbar.stretch { justify-content: stretch;}#compose-container .toolbar-button { display: inline-block; color: var(--text-insignificant-color); background-color: transparent; padding: 0 8px; border-radius: 8px; min-height: 2.4em; min-width: 2.6em; text-align: center; overflow: hidden; position: relative; border: 2px solid transparent; vertical-align: middle; align-content: center; word-wrap: normal; overflow: hidden;
&.active { filter: brightness(0.8); background-color: var(--bg-color); }}#compose-container .toolbar-button > * { vertical-align: middle; cursor: inherit; outline: 0;}#compose-container .toolbar-button:has(:not(option):disabled),#compose-container .toolbar-button:disabled { pointer-events: none; background-color: transparent; opacity: 0.5;}#compose-container .toolbar-button :is(input[type='checkbox'], select, input[type='file']) { opacity: 0; position: absolute; inset: 0; margin: 0;}#compose-container .toolbar-button input[type='file'] { /* Move this out of the way, to fix cursor: pointer bug */ left: -100vw !important;}#compose-container .toolbar-button select { background-color: inherit; border: 0; padding: 0 0 0 8px; margin: 0; appearance: none; line-height: 1em;}#compose-container .toolbar-button:not(:disabled):is( :hover, :focus, :focus-within, :focus-visible ) { cursor: pointer; filter: none; background-color: var(--bg-color); border-color: var(--link-faded-color); outline: 0; color: var(--link-color);}#compose-container .toolbar-button:not(:disabled).highlight { color: var(--text-color); border-color: var(--link-faded-color); background-color: var(--bg-blur-color);
&:where(:focus-within, :hover) { background-color: var(--link-bg-color); }}#compose-container .toolbar-button:not(:disabled):active { filter: brightness(0.8);}
#compose-container .toolbar-button .icon-text { display: inline-block; font-size: 14px; text-overflow: ellipsis; overflow: hidden; max-width: 100%; min-width: 4ch; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;}
#compose-container .compose-footer { .add-toolbar-button-group { display: flex; overflow: auto; min-width: 42px; } .add-sub-toolbar-button-group { flex-grow: 1; display: flex; overflow: auto; transition: 0.5s ease-in-out; transition-property: opacity, width; scrollbar-width: none; padding-inline-end: 16px; mask-image: linear-gradient( var(--to-backward), transparent 0, black 16px, black 100% );
&::-webkit-scrollbar { display: none; }
&[hidden] { opacity: 0; pointer-events: none; width: 0; } }}
#compose-container text-expander { position: relative; display: block;}#compose-container .text-expander-menu { color: var(--text-color); background-color: var(--bg-color); position: absolute; margin-top: 2em; padding: 0; list-style: none; border: 1px solid var(--outline-color); box-shadow: 0 4px 24px var(--drop-shadow-color); border-radius: 8px; overflow: hidden; z-index: 100; min-width: 10em; max-width: 90vw;}#compose-container .text-expander-menu li { white-space: nowrap; padding: 8px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; display: flex; gap: 8px; align-items: center; font-size: 90%;
.grow { flex-grow: 1; }
.count { font-size: 80%; opacity: 0.5; }}#compose-container .text-expander-menu li b img { /* The shortcode emojis */ width: 0.9em; height: 0.9em;}#compose-container .text-expander-menu li .avatar { width: 2.2em; height: 2.2em;}#compose-container .text-expander-menu li:is(:hover, :focus, [aria-selected]) { background-color: var(--link-bg-color); color: var(--text-color);}#compose-container .text-expander-menu li[aria-selected] { box-shadow: inset 4px 0 0 0 var(--button-bg-color); :dir(rtl) & { box-shadow: inset -4px 0 0 0 var(--button-bg-color); }}#compose-container .text-expander-menu li[data-more] { &:not(:hover, :focus, [aria-selected]) { color: var(--text-insignificant-color); background-color: var(--bg-faded-color); }
font-size: 0.8em; justify-content: center;}
#compose-container .media-attachments { background-color: var(--bg-faded-blur-color); padding: 8px; /* margin: 8px 0 0; */ display: flex; flex-direction: column; gap: 8px;
@media (min-width: 40em) { border-radius: 8px; }}#compose-container .media-attachment { display: flex; gap: 8px; align-items: stretch;
.media-error { padding: 2px; color: var(--orange-fg-color); background-color: transparent; border: 1.5px dashed transparent; line-height: 1; border-radius: 4px; display: flex;
&:is(:hover, :focus) { background-color: var(--bg-color); border-color: var(--orange-fg-color); } }}#compose-container .media-preview { flex-shrink: 0; border: 1px solid var(--outline-color); border-radius: 4px; overflow: hidden; width: 80px; height: 80px; /* checkerboard background */ background-image: linear-gradient(45deg, var(--img-bg-color) 25%, transparent 25%), linear-gradient(-45deg, var(--img-bg-color) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--img-bg-color) 75%), linear-gradient(-45deg, transparent 75%, var(--img-bg-color) 75%); background-size: 10px 10px; background-position: 0 0, 0 5px, 5px -5px, -5px 0px;}#compose-container .media-preview > * { width: 80px; height: 80px; object-fit: scale-down; vertical-align: middle; pointer-events: none;}#compose-container .media-preview:hover { box-shadow: 0 0 0 2px var(--link-light-color); cursor: pointer;}#compose-container .media-attachment textarea { height: 80px; flex-grow: 1; resize: none;}#compose-container .media-attachments .media-desc { flex-grow: 1;}#compose-container .media-attachments .media-desc p { font-size: 90%; margin: 0; padding: 0; /* clamp 2 lines */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}#compose-container .media-attachments .media-desc p i { color: var(--text-insignificant-color);}#compose-container .media-aside { display: flex; flex-direction: column; justify-content: space-between; align-items: center;}#compose-container .media-aside .uploaded { color: var(--green-color); margin-bottom: 4px;}
#compose-container form .close-button { padding: 4px; align-self: center; color: var(--text-insignificant-color);
&:is(:hover, :focus) { color: var(--text-color); background-color: var(--bg-color); }}
#compose-container { .quote-status { border-radius: 8px; border: 1px solid var(--outline-color); background-color: var(--bg-color); box-shadow: inset 0 0 2px var(--outline-color); margin: 0 8px; overflow: auto; max-height: 160px; view-transition-name: compose-quote-status;
@media (min-width: 40em) { margin: 0; }
> .status { font-size: calc(var(--text-size) * 0.9); pointer-events: none; } }}
#compose-container { .compose-link-preview { display: grid; grid-template-columns: minmax(0, 96px) minmax(0, 1fr) auto; gap: 10px; align-items: center; margin: 0 8px; padding: 8px; border: 1px solid var(--outline-color); border-radius: 8px; background-color: var(--bg-color); box-shadow: inset 0 0 2px var(--outline-color);
@media (min-width: 40em) { margin: 0; }
> img { width: 96px; aspect-ratio: 1.91; object-fit: cover; border-radius: 6px; background-color: var(--img-bg-color); }
> img + .compose-link-preview-body { min-width: 0; }
&:not(:has(> img)) { grid-template-columns: minmax(0, 1fr) auto; } }
.compose-link-preview-body { min-width: 0; display: grid; gap: 2px; }
.compose-link-preview-title, .compose-link-preview small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compose-link-preview-title { font-weight: 600; }
.compose-link-preview small { color: var(--text-insignificant-color); }}
::view-transition-group(compose-quote-status) { animation-duration: 0.5s; animation-delay: 0.1s;}::view-transition-old(compose-quote-status),::view-transition-new(compose-quote-status) { width: 100%; height: 100%;}
.compose-menu-add-media { position: relative;
.compose-menu-add-media-field { position: absolute; inset: 0; opacity: 0; cursor: inherit; }}
.icon-gif { display: inline-block !important; min-width: 16px; height: 16px; font-size: 10px !important; letter-spacing: -0.5px; font-size-adjust: none; overflow: hidden; white-space: nowrap; text-align: center; line-height: 16px; font-weight: bold; text-rendering: optimizeSpeed;
&:after { display: block; content: 'GIF'; }}
#compose-container button[type='submit'] { border-radius: 9px; align-self: stretch;
/* @media (min-width: 480px) { padding-inline: 24px; font-size: 125%; } */}
@keyframes breathe { 0% { opacity: 1; } 40% { opacity: 0.4; } 100% { opacity: 1; }}
#media-sheet { .media-form { flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 50vh;
textarea { flex-grow: 1; resize: none; width: 100%; /* height: 10em; */
&.loading { animation: skeleton-breathe 1.5s linear infinite; } }
footer { display: flex; justify-content: space-between; align-items: center; } }}#media-sheet main { padding-top: 8px; display: flex; flex-direction: column; flex: 1; gap: 8px;}#media-sheet .media-preview { border: 2px solid var(--outline-color); border-radius: 8px; overflow: hidden; box-shadow: 0 2px 16px var(--img-bg-color); /* checkerboard background */ background-image: linear-gradient(45deg, var(--img-bg-color) 25%, transparent 25%), linear-gradient(-45deg, var(--img-bg-color) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--img-bg-color) 75%), linear-gradient(-45deg, transparent 75%, var(--img-bg-color) 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px; flex: 0.8;}#media-sheet .media-preview > * { width: 100%; height: 100%; max-height: 50vh; object-fit: scale-down; vertical-align: middle;}
@media (min-width: 50em) { #media-sheet main { flex-direction: row; } #media-sheet .media-preview { flex: 2; } #media-sheet .media-preview > * { max-height: none; } /* #media-sheet textarea { flex: 1; min-height: 100%; height: auto; } */}
#mention-sheet { height: 50vh;
.accounts-list { --list-gap: 1px; list-style: none; margin: 0; padding: 8px 0; display: flex; flex-direction: column; row-gap: var(--list-gap);
&.loading { opacity: 0.5; }
li { display: flex; flex-grow: 1; /* align-items: center; */ margin: 0 -8px; padding: 8px; gap: 8px; position: relative; justify-content: space-between; border-radius: 8px; /* align-items: center; */
&:hover { background-image: linear-gradient( var(--to-forward), transparent 75%, var(--link-bg-color) ); }
&.selected { background-image: linear-gradient( var(--to-forward), var(--bg-faded-color) 75%, var(--link-bg-color) ); }
&:before { content: ''; display: block; border-top: var(--hairline-width) solid var(--divider-color); position: absolute; bottom: 0; inset-inline-start: 58px; inset-inline-end: 0; }
&:has(+ li:is(.selected, :hover)):before, &:is(.selected, :hover):before { opacity: 0; }
> button { border-radius: 4px; &:hover { outline: 2px solid var(--button-bg-blur-color); } } } }}
.compose-field-container { display: grid !important;
@media (max-width: 40em) { .compose-field { outline-offset: -2px; } }
&.debug { grid-template-columns: 1fr 1fr; }
> .compose-field, > .compose-highlight { grid-area: 1 / 1 / 2 / 2; }
.compose-highlight { user-drag: none; user-select: none; pointer-events: none; touch-action: none; padding: 8px; color: transparent; background-color: transparent; border: 2px solid transparent; line-height: 1.4; overflow: auto; unicode-bidi: plaintext; -webkit-rtl-ordering: logical; rtl-ordering: logical; overflow-wrap: break-word; white-space: pre-wrap; min-height: 4em; max-height: 50vh; scrollbar-width: none;
:lang(mn-Mong) ~ & { writing-mode: vertical-lr; max-height: 50vh !important; }
&::-webkit-scrollbar { display: none; }
/* Follow textarea styles */ @media (min-width: 40em) { max-height: 65vh; }
mark { color: inherit; }
.compose-highlight-url, .compose-highlight-hashtag { background-color: transparent; text-decoration: underline; text-decoration-color: var(--link-faded-color); text-decoration-thickness: 2px; text-underline-offset: 2px; } .compose-highlight-mention, .compose-highlight-exceeded { mix-blend-mode: multiply; border-radius: 4px; box-shadow: 0 0 0 1px; } .compose-highlight-mention { background-color: var(--orange-light-bg-color); box-shadow-color: var(--orange-light-bg-color); } .compose-highlight-exceeded { background-color: var(--red-bg-color); box-shadow-color: var(--red-bg-color); }
@media (prefers-color-scheme: dark) { .compose-highlight-mention, .compose-highlight-exceeded { mix-blend-mode: screen; } } }}
@keyframes gif-shake { 0% { transform: rotate(0deg); } 25% { transform: rotate(5deg); } 50% { transform: rotate(0deg); } 75% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); }}
@keyframes jump-scare { from { opacity: 0.5; transform: scale(0.25) translateX(80px); } to { opacity: 1; transform: scale(1) translateX(0); }}@keyframes jump-scare-rtl { from { opacity: 0.5; transform: scale(0.25) translateX(-80px); } to { opacity: 1; transform: scale(1) translateX(0); }}
.add-button { transform-origin: var(--forward) center; background-color: var(--bg-color) !important; /* animation: jump-scare 0.2s ease-in-out both; :dir(rtl) & { animation-name: jump-scare-rtl; } */
.icon { transition: transform 0.3s ease-in-out; } &.active { .icon { transform: rotate(135deg); } }}
.gif-picker-button { /* span { font-weight: bold; font-size: 11.5px; display: block; line-height: 1; } */
&:is(:hover, :focus) { .icon { animation: gif-shake 0.3s 3; } }}
#gif-picker-sheet { height: 50svh;
form { display: flex; flex-direction: row; gap: 8px; align-items: center;
input[type='search'] { flex-grow: 1; min-width: 0; } }
main { overflow-x: auto; overflow-y: hidden; mask-image: linear-gradient( var(--to-forward), transparent 2px, black 16px, black calc(100% - 16px), transparent calc(100% - 2px) );
@media (min-height: 480px) { overflow-y: auto; max-height: 50vh; }
&.loading { opacity: 0.25; }
.ui-state { min-height: 100px; }
ul { min-height: 100px; display: flex; gap: 4px; list-style: none; padding: 8px 2px; margin: 0;
@media (min-height: 480px) { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); grid-auto-rows: 1fr; }
li { list-style: none; padding: 0; margin: 0; max-width: 100%; display: flex;
button { padding: 4px; margin: 0; border: none; background-color: transparent; color: inherit; cursor: pointer; border-radius: 8px; background-color: var(--bg-faded-color);
@media (min-height: 480px) { width: 100%; text-align: center; }
&:is(:hover, :focus) { background-color: var(--link-bg-color); box-shadow: 0 0 0 2px var(--link-light-color); filter: none; } }
figure { margin: 0; padding: 0; width: var(--figure-width); max-width: 100%;
@media (min-height: 480px) { width: 100%; text-align: center; }
figcaption { font-size: 0.8em; padding: 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text-insignificant-color); } }
img { background-color: var(--img-bg-color); border-radius: 4px; vertical-align: top; object-fit: contain; } } }
.pagination { display: flex; justify-content: space-between; gap: 8px; padding: 0; margin: 0; position: sticky; bottom: 0; left: 0; right: 0;
@media (min-height: 480px) { position: static; } } }}