Something went wrong. Try again.
very fast at protocol indexer with flexible filtering, xrpc queries, cursor-backed event stream, and more, built on fjall
rust fjall at-protocol atproto indexer
Something went wrong. Try again.
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697/* the window: a yellow tab, a toolbar, and below it the page in a list column and a sheet of paper. the window stays put while what's in it scrolls, but it's still the page that scrolls: the head and foot stick to the viewport and the content passes under them. */
.desk { max-width: 1160px; margin: 0 auto; padding: 0 18px; }.win { min-width: 0; }
/* the head and foot reach past the window's sides so the shadow scrolling under them is covered too */.win-head, .win-foot { position: sticky; z-index: 10; margin: 0 -18px; padding: 0 18px; background: var(--desk-bg); }.win-head { top: 0; padding-top: 22px; }.win-foot { bottom: 0; padding-bottom: 24px; }
.frame-top, .frame, .lip { background: var(--chrome); border: 1px solid var(--edge); box-shadow: inset 1px 0 0 var(--hi), inset -1px 0 0 var(--lo), 6px 0 10px -6px var(--shadow);}.frame-top { border-bottom: 0; border-radius: var(--r-box) var(--r-box) 0 0; box-shadow: inset 1px 1px 0 var(--hi), inset -1px 0 0 var(--lo), 6px 0 10px -6px var(--shadow);}.frame { border-top: 0; border-bottom: 0; }
/* lips: the window's padding above and below the content, with the paper's own top and bottom edges drawn in them, so the content seems to scroll inside the paper */.lip { display: grid; grid-template-columns: var(--list-w) minmax(0, 1fr); gap: 10px; height: 10px; padding: 0 10px; border-top: 0; border-bottom: 0;}.lip.solo { grid-template-columns: minmax(0, 1fr); }.lip.solo .l, .lip.none .l, .lip.none .p { display: none; }.lip .p { height: 2px; background: var(--paper); border: 1px solid var(--edge); }.lip.top .p { align-self: end; border-bottom: 0; border-radius: var(--r-box) var(--r-box) 0 0; box-shadow: inset 1px 1px 0 var(--lo-deep), inset -1px 0 0 var(--hi);}.lip.bot { height: 11px; border-bottom: 1px solid var(--edge); border-radius: 0 0 var(--r-box) var(--r-box); box-shadow: inset 1px 0 0 var(--hi), inset -1px -1px 0 var(--lo), 6px 6px 12px -6px var(--shadow);}.lip.bot .p { align-self: start; border-top: 0; border-radius: 0 0 var(--r-box) var(--r-box); box-shadow: inset 1px 0 0 var(--lo-deep), inset -1px -1px 0 var(--hi);}
/* the tab sits on the frame's top edge, it isn't a separate box above it */.tab { position: relative; z-index: 1; margin-bottom: -1px; display: flex; align-items: center; gap: 7px; width: max-content; max-width: 100%; padding: 3px 12px 3px 6px; font-weight: 700; font-size: 13px; color: var(--tab-text); text-decoration: none; background: var(--grad-tab); border: 1px solid var(--edge); border-bottom: none; border-radius: 3px 3px 0 0; box-shadow: inset 1px 1px 0 var(--tab-hi), inset -1px 0 0 var(--tab-lo);}.tab .icon { margin: -4px 0; }
.tb { position: relative; z-index: 5; display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: var(--grad-bar); border-bottom: 1px solid var(--edge); box-shadow: inset 1px 1px 0 var(--hi), inset 0 -1px 0 var(--lo);}.tb > .btn { padding: 3px 10px; }.tb > .btn:active { padding: 4px 9px 2px 11px; }.tb .sep { width: 2px; align-self: stretch; margin: 2px 4px; border-left: 1px solid var(--etch); border-right: 1px solid var(--hi); }
/* a page: the list column beside the paper */.pane { display: grid; grid-template-columns: var(--list-w) minmax(0, 1fr); gap: 10px; padding: 0 10px; align-items: start;}.pane.solo { grid-template-columns: minmax(0, 1fr); }.paper { min-width: 0; min-height: calc(100vh - var(--head-h) - var(--foot-h)); background: var(--paper); border: 1px solid var(--edge); border-top: 0; border-bottom: 0; box-shadow: inset 1px 0 0 var(--lo-deep), inset -1px 0 0 var(--hi);}
@media (max-width: 760px) { /* a phone is all window: it just scrolls, with the window's edges in the flow */ .desk { padding: 0 8px; } .win-head, .win-foot { position: static; margin: 0 -8px; padding-left: 8px; padding-right: 8px; } .win-head { padding-top: 10px; } .lip { height: 6px; } .lip.bot { height: 7px; } .lip .l, .lip .p { display: none; } .tb { gap: 4px; } .tb .sep { display: none; } .pane { grid-template-columns: minmax(0, 1fr); padding: 0 6px; } .pane > .side { display: none; } .paper { border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge); border-radius: var(--r-box); box-shadow: var(--well-edge); min-height: 0; }}