html, body { margin: 0; padding: 0; background-color: var(--bg-color); color: var(--text-color); overflow-x: hidden; } #app { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; } /* MENTIONS */ a.mention { text-decoration-line: none; } a.mention span { text-decoration-line: underline; text-decoration-color: inherit; text-decoration-thickness: 2px; text-underline-offset: 2px; } /* a.mention:has(span).hashtag { color: var(--link-light-color); } */ a.mention span { color: var(--text-color); } .deck-container { width: 100%; height: 100vh; height: 100dvh; overflow: auto; overflow-x: hidden; transition: opacity 0.1s ease-in-out; overscroll-behavior: contain; scroll-behavior: smooth; } .deck-container[hidden] { display: block; position: absolute; user-select: none; pointer-events: none; opacity: 0; content-visibility: hidden; } .deck-container, .deck.contained { scroll-padding-top: 3em; } .deck { min-height: 100vh; min-height: 100dvh; margin: auto; width: 40em; max-width: 100vw; border-left: 1px solid rgba(0, 0, 0, 0.1); border-right: 1px solid rgba(0, 0, 0, 0.1); background-color: var(--bg-color); } .deck.contained { overflow: auto; overflow-x: hidden; height: 100vh; height: 100dvh; overscroll-behavior: contain; } .deck header { min-height: 3em; position: sticky; top: 0; background-color: var(--bg-blur-color); background-image: linear-gradient(to bottom, var(--bg-color), transparent); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--divider-color); z-index: 1; cursor: default; z-index: 10; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; user-select: none; transition: transform 0.5s ease-in-out; user-select: none; } .deck header[hidden] { transform: translateY(-100%); pointer-events: none; user-select: none; } .deck header > .header-side:last-of-type { text-align: right; grid-column: 3; } .deck header :is(button, .button).plain { backdrop-filter: none; } .deck header h1 { margin: 0 8px; padding: 0; font-size: 1.2em; text-align: center; } .deck header h1:first-child { text-align: left; padding-left: 8px; } .deck h2 { font-size: 1.45em; } .deck.padded-bottom .timeline > li:last-child { padding-bottom: 80vh !important; padding-bottom: 80dvh !important; } .timeline { margin: 0 auto; padding: 0; } .timeline.grow { /* min-height: 100vh; min-height: 100dvh; */ padding-bottom: calc(env(safe-area-inset-bottom) + 16px); } .timeline > li { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--divider-color); } .timeline.flat > li { border-bottom: none; } .timeline.contextual > li { --width: 3px; --left: 40px; --right: calc(var(--left) + var(--width)); background-image: linear-gradient( to right, transparent, transparent var(--left), var(--comment-line-color) var(--left), var(--comment-line-color) var(--right), transparent var(--right), transparent ); background-repeat: no-repeat; transition: opacity 0.3s ease-in-out; } .timeline.contextual > li:first-child { background-position: 0 16px; } .timeline.contextual > li:last-child { background-size: 100% 20px; } .timeline.contextual > li.descendant { position: relative; } .timeline.contextual > li.descendant { padding-bottom: 1em; } .timeline.contextual > li.descendant:not(.thread) > .status-link { padding-left: 40px; } .timeline.contextual > li.descendant.thread > .status-link + .replies > summary { margin-left: calc(50px + 16px + 12px); } .timeline.contextual > li.descendant.thread > .status-link + .replies .status-link { padding-left: calc(50px + 16px + 12px); } .timeline.contextual > li.descendant:not(.thread) > .status-link + .replies > summary { margin-left: calc(40px + 16px); } .timeline.contextual > li.descendant:not(.thread) > .status-link + .replies .status-link { padding-left: calc(40px + 16px); } .timeline.contextual > li.descendant:not(.thread):before { --radius: 10px; --diameter: calc(var(--radius) * 2); content: ''; position: absolute; top: 10px; left: 40px; width: var(--diameter); height: var(--diameter); border-radius: var(--radius); border-style: solid; border-width: var(--width); border-color: transparent transparent var(--comment-line-color) transparent; transform: rotate(45deg); } .timeline.contextual > li .replies-link { color: var(--text-insignificant-color); margin-left: 16px; margin-top: -12px; padding-bottom: 12px; font-size: 90%; } .timeline.contextual > li.thread > .status-link .replies-link { margin-left: calc(50px + 16px + 12px); } .timeline.contextual > li .replies-link * { vertical-align: middle; } .timeline.contextual > li .replies { margin-top: -12px; } .timeline.contextual > li .replies :is(ul, li) { margin: 0; padding: 0; list-style: none; } .timeline.contextual > li .replies summary { padding: 8px 16px; background-color: var(--bg-faded-color); display: inline-block; border-radius: 8px; cursor: pointer; text-transform: uppercase; font-weight: bold; font-size: 12px; color: var(--text-insignificant-color); user-select: none; box-shadow: 0 0 0 2px var(--bg-color); position: relative; } .timeline.contextual > li .replies summary:active, .timeline.contextual > li .replies[open] summary { color: var(--text-color); background-color: var(--comment-line-color); background-image: linear-gradient( to top right, var(--comment-line-color), var(--bg-faded-color) ); } .timeline.contextual > li .replies[open] summary { border-bottom-left-radius: 0; } .timeline.contextual > li .replies summary[hidden] { display: none; } .timeline.contextual > li .replies li { position: relative; } .timeline.contextual > li .replies li { --width: 3px; --left: calc(40px + 16px); --right: calc(var(--left) + var(--width)); background-image: linear-gradient( to right, transparent, transparent var(--left), var(--comment-line-color) var(--left), var(--comment-line-color) var(--right), transparent var(--right), transparent ); background-repeat: no-repeat; } .timeline.contextual > li.thread .replies li { --left: calc(50px + 16px + 12px); } .timeline.contextual > li .replies li:last-child { background-size: 100% 20px; } .timeline.contextual > li .replies li:before { --radius: 10px; --diameter: calc(var(--radius) * 2); content: ''; position: absolute; top: 10px; left: calc(40px + 16px); width: var(--diameter); height: var(--diameter); border-radius: var(--radius); border-style: solid; border-width: var(--width); border-color: transparent transparent var(--comment-line-color) transparent; transform: rotate(45deg); } .timeline.contextual > li.thread .replies li:before { left: calc(50px + 16px + 12px); } .timeline.contextual.loading > li:not(.hero) { opacity: 0.5; pointer-events: none; /* background-image: none !important; */ } /* .timeline.contextual.loading > li:not(.hero):before { content: none !important; } */ .timeline-deck.compact .status { max-height: max(25vh, 160px); overflow: hidden; mask-image: linear-gradient( rgba(0, 0, 0, 1), rgba(0, 0, 0, 1) 80%, transparent 95% ); } .timeline-deck.compact .status .meta ~ * { pointer-events: none; } .timeline-header { padding: 0 16px; opacity: 0.75; } .timeline-empty { color: var(--text-insignificant-color); padding: 0 16px; margin-bottom: 3em; } .status-loading { text-align: center; color: var(--text-insignificant-color); } .status-error { text-align: center; color: var(--text-insignificant-color); } .status-link { display: block; text-decoration-line: none; color: inherit; user-select: none; transition: background-color 0.2s ease-out; -webkit-tap-highlight-color: transparent; animation: appear 0.2s ease-out; } .status-link:is(:hover, :focus) { background-color: var(--link-bg-hover-color); outline-offset: -2px; } .status-link:active:not(:has(:is(.media, button):active)) { filter: brightness(0.95); } .ui-state { padding: 16px; text-align: center; } .deck-backdrop { position: fixed; top: 0; right: 0; height: 100%; width: 100%; z-index: 1000; display: flex; background-color: var(--backdrop-color); animation: appear 0.2s ease-out; } .deck-backdrop > a { flex-grow: 1; /* backdrop-filter: saturate(0.75); */ } @keyframes slide-in { 0% { transform: translate3d(100%, 0, 0); } 100% { transform: translate3d(0, 0, 0); } } .deck-backdrop .deck { width: 40em; max-width: 100vw; background-color: var(--bg-color); animation: slide-in 0.5s var(--timing-function); box-shadow: -1px 0 var(--bg-color); } .deck-backdrop .deck .status { max-width: 40em; } .decks { flex-grow: 1; width: 100%; } .deck-close { color: var(--text-insignificant-color) !important; } .deck-close:is(:hover, :focus) { color: var(--text-color) !important; } :is(button, .button).plain.has-badge:after { content: ''; display: inline-block; position: absolute; right: 10px; width: 4px; height: 4px; border-radius: 50%; background-color: var(--link-color); opacity: 0.5; } @keyframes fade-from-top { 0% { transform: translate(-50%, -200%); opacity: 0; } 100% { transform: translate(-50%, 0); opacity: 1; } } .updates-button { position: absolute; z-index: 2; animation: fade-from-top 0.3s ease-out; left: 50%; margin-top: 8px; transform: translate(-50%, 0); font-size: 90%; background: linear-gradient( to bottom, var(--button-bg-blur-color), var(--button-bg-color) ); backdrop-filter: blur(16px); box-shadow: 0 3px 8px -1px var(--bg-faded-blur-color), 0 10px 36px -4px var(--button-bg-blur-color); } .updates-button .icon { vertical-align: top; } /* BOX */ .box { width: 40em; max-width: 100vw; padding: 16px; } /* CAROUSEL */ /* use snap, center children, max width viewport */ .carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; /* scroll-behavior: smooth; */ scrollbar-width: none; overscroll-behavior: contain; touch-action: pan-x; } .carousel::-webkit-scrollbar { display: none; } .carousel > * { scroll-snap-align: center; scroll-snap-stop: always; flex-shrink: 0; display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; height: 100dvh; background-color: var(--average-color-alpha); background-image: radial-gradient( closest-side, var(--average-color) 10%, var(--average-color-alpha) 40%, transparent 100% ); } .carousel > * :is(img, video) { width: auto; max-width: 100vw; height: auto; max-height: 100vh; max-height: 100dvh; vertical-align: middle; } .carousel > * video { min-height: 80px; max-height: 80vh; /* prevent other UI elements from obscuring video */ } .carousel-top-controls { top: 0; top: env(safe-area-inset-top, 0); } .carousel-controls { bottom: 0; bottom: env(safe-area-inset-bottom, 0); } :is(.carousel-top-controls, .carousel-controls) { position: fixed; left: 0; left: env(safe-area-inset-left, 0); right: 0; right: env(safe-area-inset-right, 0); padding: 16px; display: flex; gap: 8px; justify-content: space-between; text-align: center; pointer-events: none; } :is(.carousel-top-controls, .carousel-controls)[hidden] { opacity: 0; } :is(.button, button).carousel-button, button.carousel-dot { pointer-events: auto; font-weight: bold; } :is(.button, button).carousel-button[hidden] { display: inline-block; opacity: 0; pointer-events: none; } .carousel-dots { border-radius: 999px; backdrop-filter: blur(12px) invert(0.25) brightness(1.5); } @media (prefers-color-scheme: dark) { .carousel-dots { backdrop-filter: blur(12px) brightness(0.5); } } button.carousel-dot { color: var(--text-insignificant-color) !important; font-weight: bold; backdrop-filter: none !important; } button.carousel-dot:is(:hover, :focus) button.carousel-dot.active, button.carousel-dot[disabled].active { color: var(--link-color) !important; } button.carousel-dot.active, button.carousel-dot[disabled].active { opacity: 1; transform: scale(2) translateY(-0.5px); } @media (hover: hover) { .carousel-top-controls { transform: translateY(-100%); transition: transform 0.2s ease-in-out; } .carousel-controls { transform: translateY(100%); transition: transform 0.2s ease-in-out; } :is(.carousel-top-controls, .carousel-controls)[hidden] { opacity: 1; } .carousel:hover + .carousel-top-controls, .carousel:hover + .carousel-top-controls + .carousel-controls, .carousel-top-controls:hover, .carousel-controls:hover, .carousel-top-controls:focus-within, .carousel-controls:focus-within { transform: translateY(0); } } @media (prefers-color-scheme: dark) { .carousel :is(img, video) { /* No need fade out if inside carousel */ filter: none; } } /* COMPOSE BUTTON */ #compose-button { position: fixed; bottom: 16px; bottom: max(16px, env(safe-area-inset-bottom)); right: 16px; right: max(16px, env(safe-area-inset-right)); padding: 16px; background-color: var(--button-bg-blur-color); backdrop-filter: blur(16px); z-index: 1; box-shadow: 0 3px 8px -1px var(--bg-faded-blur-color), 0 10px 36px -4px var(--button-bg-blur-color); transition: all 0.3s ease-in-out; } #compose-button[hidden] { transform: translateY(200%); pointer-events: none; user-select: none; } #compose-button .icon { transition: transform 0.3s ease-in-out; } #compose-button[hidden] .icon { transform: rotateY(180deg); } #compose-button:is(:hover, :focus) { background-color: var(--button-bg-color); filter: none; } #compose-button:active { filter: brightness(0.75); } #compose-button .icon { filter: drop-shadow(0 1px 2px var(--button-bg-color)); } /* SHEET */ .sheet { align-self: flex-end; display: flex; flex-direction: column; max-height: 90vh; max-height: 90dvh; overflow: hidden; background-color: var(--bg-color); width: 100%; max-width: calc(40em - 50px - 16px); border-radius: 16px 16px 0 0; box-shadow: 0 -1px 32px var(--divider-color); animation: slide-up 0.3s var(--timing-function); border: 1px solid var(--outline-color); } .sheet-max { width: 90vw; width: 90dvw; max-width: none; height: 90vh; height: 90dvh; } .sheet header { padding: 16px 16px 8px; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); user-select: none; } .sheet header :is(h1, h2, h3) { margin: 0; } .sheet main { overflow: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 16px 16px; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); padding-bottom: max(16px, env(safe-area-inset-bottom)); } .sheet header + main { padding-top: 0; mask-image: linear-gradient(to bottom, transparent 0%, black 10px); } /* TAG */ .tag { font-size: smaller; color: var(--bg-faded-color); background-color: var(--text-insignificant-color); padding: 2px 4px; border-radius: 4px; display: inline-block; margin: 4px; align-self: center; } .tag .icon { vertical-align: middle; } /* MENU POPUP */ .menu-container { position: relative; } .menu-container button { color: inherit !important; } .menu-container button:is(:hover, :active, :focus) { background-color: var(--button-plain-bg-hover-color); } .menu-container menu { position: absolute; right: 0; top: 0; transform: translateY(-100%); opacity: 0; pointer-events: none; padding: 8px 0; margin: 0; font-size: 16px; background-color: var(--bg-color); width: 10em; list-style: none; z-index: 100; border: 1px solid var(--outline-color); border-radius: 8px; transition: all 0.2s ease-in-out; box-shadow: 0 0 8px var(--bg-faded-color), 0 4px 8px var(--bg-faded-color), 0 2px 4px var(--bg-faded-color); } .menu-container menu li { margin: 0; padding: 0; list-style: none; } .menu-container > button:is(:hover, :active, :focus) + menu, .menu-container menu:is(:hover, :active) { opacity: 1; pointer-events: auto; } .menu-container menu button { width: 100%; text-align: left; color: var(--text-color) !important; border-radius: 0; } .menu-container menu button:is(:hover, :focus) { color: var(--bg-color) !important; background-color: var(--link-color); } /* DONUT METER */ meter.donut { appearance: none; } meter.donut::-webkit-meter-inner-element, meter.donut::-webkit-meter-bar, meter.donut::-webkit-meter-optimum-value, meter.donut::-webkit-meter-suboptimum-value, meter.donut::-webkit-meter-even-less-good-value { display: none; } meter.donut::-moz-meter-bar { background: transparent; } meter.donut { position: relative; width: 24px; height: 24px; border-radius: 50%; --fill: calc(var(--percentage) * 1%); --color: var(--link-color); --middle-circle: radial-gradient( circle at 50% 50%, var(--bg-faded-color) 10px, transparent 10px ); background-image: var(--middle-circle), conic-gradient(var(--color) var(--fill), var(--bg-faded-blur-color) 0); } meter.donut.warning { --color: var(--orange-color); } meter.donut.danger { --color: var(--red-color); } meter.donut.explode { background-image: none; } meter.donut:is(.warning, .danger, .explode):after { content: attr(data-left); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 12px; color: var(--text-insignificant-color); } meter.donut:is(.danger, .explode):after { color: var(--red-color); } /* TOAST */ :root .toastify { background-image: linear-gradient( to bottom, var(--button-bg-blur-color), var(--button-bg-color) ); backdrop-filter: blur(16px); color: var(--button-text-color); border-radius: 10em; padding: 8px 16px; box-shadow: 0 3px 8px -1px var(--bg-faded-blur-color), 0 10px 36px -4px var(--button-bg-blur-color); } .toastify-bottom { margin-bottom: env(safe-area-inset-bottom); } :root .toastify:hover { filter: brightness(1.2); } :root .toastify:active { filter: brightness(0.8); } /* AVATARS STACK */ .avatars-stack { display: flex; flex-wrap: wrap; gap: 4px; } @media (min-width: 40em) { html, body { background-color: var(--bg-faded-color); } #app { display: flex; } .decks { transition: transform 0.4s var(--timing-function); } .decks:has(~ .deck-backdrop) { transition: transform 0.4s ease-out; transform: translate3d(-5vw, 0, 0); } .deck-backdrop .deck { width: 50%; min-width: 40em; border-left: 1px solid var(--divider-color); } .timeline-deck { border: 0; background-color: transparent; } .timeline-deck header { min-height: 6em; border-bottom: 0; background-color: var(--bg-faded-blur-color); background-image: linear-gradient( to bottom, var(--bg-faded-color), transparent 50% ); border-bottom: 0; mask-image: linear-gradient( rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0.7) 80%, rgba(0, 0, 0, 0.5) 90%, transparent ); } .deck header h1 { font-size: 1.5em; } .timeline-deck .timeline:not(.flat) li { border: 1px solid var(--divider-color); margin: 16px 0; background-color: var(--bg-color); border-radius: 16px; overflow: hidden; box-shadow: 0px 1px var(--bg-blur-color); } .box { padding: 32px; } :is(.carousel-top-controls, .carousel-controls) { padding: 32px; } }