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); } a[href^='http'][rel*='nofollow']:visited:not(:has(div)) { color: var(--link-visited-color); text-decoration-color: var(--link-visited-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; background-color: var(--bg-color); } .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: var(--hairline-width) 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: var(--hairline-width) 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; } .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; } :is(.status-link, .status-focus):is(:focus, .is-active) { background-color: var(--link-bg-hover-color); outline-offset: -2px; } @media (hover: hover) { .status-link:hover { background-color: var(--link-bg-hover-color); outline-offset: -2px; } } .status-link:active:not(:has(:is(.media, button):active)) { filter: brightness(0.95); } .boost-carousel { background: linear-gradient( to bottom right, var(--reblog-faded-color), transparent 150% ); position: relative; } .boost-carousel:after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient( ellipse 50% 32px at bottom center, var(--reblog-faded-color), transparent ), linear-gradient(to top, var(--bg-color), transparent 64px); background-repeat: no-repeat; background-position: bottom center; } .boost-carousel .status-reblog { background-image: none; } .boost-carousel header { padding: 8px 16px 0; display: flex; justify-content: space-between; align-items: center; } .boost-carousel h3 { margin: 0; padding: 0; font-size: 14px; text-transform: uppercase; color: var(--reblog-color); text-shadow: 0 1px var(--bg-color); } .boost-carousel ul { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; margin: 0; padding: 8px 16px; gap: 16px; align-items: flex-start; counter-reset: index; } .boost-carousel ul > li { scroll-snap-align: center; scroll-snap-stop: always; flex-shrink: 0; display: flex; width: 100%; max-width: min(320px, calc(100% - 16px)); list-style: none; margin: 0; padding: 0; max-height: 65vh; max-height: 65dvh; counter-increment: index; position: relative; } .boost-carousel ul > li:before { content: counter(index); position: absolute; left: 0; font-size: 10px; color: var(--reblog-color); padding: 8px; } .ui-state { padding: 16px; text-align: center; } .status-boost-link { display: block; width: 100%; 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; border: 1px solid var(--outline-color); background-color: var(--bg-blur-color); border-radius: 8px; overflow: hidden; box-shadow: 0 1px var(--bg-color); } .status-boost-link::focus { background-color: var(--link-bg-hover-color); } @media (hover: hover) { .status-boost-link:hover { background-color: var(--link-bg-hover-color); } } .status-boost-link:active:not(:has(:is(.media, button):active)) { filter: brightness(0.95); } .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; } .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; user-select: none; } .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); } :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); } button.carousel-dot { color: var(--text-insignificant-color) !important; font-weight: bold; backdrop-filter: none !important; transition: all 0.2s; } button.carousel-dot[disabled] { pointer-events: none; } button.carousel-dot:is(:hover, :focus, .active, [disabled].active) { color: var(--button-text-color) !important; } button.carousel-dot:is(.active, [disabled].active) { opacity: 1; transform: scale(2.2) translateY(-0.5px); } @media (hover: hover) { .carousel-top-controls { transform: translateY(-100%); transition: transform 0.2s ease-in-out; } .carousel-controls { transform: scaleX(200%); 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: rotate3d(0, 1, 0, 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 */ .szh-menu { padding: 8px 0 !important; margin: 0; font-size: 16px; background-color: var(--bg-color) !important; border: 1px solid var(--outline-color) !important; border-radius: 8px; box-shadow: 0 3px 6px var(--drop-shadow-color); text-align: left; animation: appear 0.15s ease-in-out; } .szh-menu .szh-menu__item { padding: 8px 16px !important; } .szh-menu .szh-menu__item:not(.szh-menu__item--disabled, .szh-menu__item--hover) { color: var(--text-color); } .szh-menu .szh-menu__item--hover { color: var(--button-text-color); background-color: var(--button-bg-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; } /* I'm just feeling bored, so having fun here */ @media (hover: hover) { .avatars-stack > * { transition: transform 0.3s ease-in-out; } .avatars-stack:hover > *:nth-of-type(odd) { transform: rotate(15deg); } .avatars-stack:hover > *:nth-of-type(even) { transform: rotate(-15deg); } } .deck-container { width: 100%; flex-grow: 1; } #home-page ~ .deck-container { z-index: 10; position: fixed; inset: 0; } #home-page:has(~ .deck-container) { display: block; position: absolute; user-select: none; pointer-events: none; opacity: 0; content-visibility: hidden; } /* TAB BAR */ #tab-bar:not([hidden]) { position: fixed; bottom: 16px; bottom: max(16px, env(safe-area-inset-bottom)); width: calc(100% - 32px); max-width: calc(40em - 32px); z-index: 100; display: flex; background-color: var(--bg-blur-color); backdrop-filter: blur(16px) saturate(3); border: var(--hairline-width) solid var(--outline-color); border-radius: 16px; box-shadow: 0 8px 32px var(--outline-color); } #tab-bar li { flex-grow: 1; margin: 0; padding: 0; list-style: none; } #tab-bar li a { text-align: center; padding: 16px 0; display: block; } @media (min-width: 40em) { html, body { background-color: var(--bg-faded-color); } .deck-container { background-color: var(--bg-faded-color); } #app { display: flex; } .deck-container { transition: transform 0.4s var(--timing-function); } .deck-container: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); transition: transform 0.4s var(--timing-function); --back-transition: transform 0.4s ease-out; } .timeline-deck .timeline:not(.flat) > li:has(.status-link.is-active) { transition: var(--back-transition); transform: translate3d(-2.5vw, 0, 0); } .timeline-deck .timeline:not(.flat) > li:not(:has(.boost-carousel)):has(+ li .status-link.is-active), .timeline-deck .timeline:not(.flat) > li:not(:has(.boost-carousel)):has(.status-link.is-active) + li { transition: var(--back-transition); transform: translate3d(-1.25vw, 0, 0); } .box { padding: 32px; } /* :is(.carousel-top-controls, .carousel-controls) { padding: 32px; } */ li:has(.boost-carousel) { width: 95vw; max-width: calc(320px * 3.3); transform: translateX(calc(-50% + 20em)); } }