/* «Універ тут?» — the page that looks and moves like Telegram itself. Values (colours, radii, curves, geometry) follow web.telegram.org/a; the phone's own theme overrides the colours through Telegram's themeParams. */ /* ---- tokens ------------------------------------------------------------- */ :root { --color-primary: #3390EC; --color-primary-shade: #4a95d6; --color-primary-tint: #3390ec1a; --color-background: #FFFFFF; --color-background-secondary: #EFEFF4; --color-background-secondary-accent: #E5E5EA; --color-background-own: #EEFFDE; --color-background-selected: #F4F4F5; --color-text: #000000; --color-text-secondary: #707579; --color-text-meta: #686c72; --color-text-meta-rgb: 104, 108, 114; --color-links: #3390EC; --color-own-links: #3390EC; --color-accent-own: #45AF54; --color-message-meta-own: #4FAE4EFF; --color-borders: #DADCE0; --color-dividers: #C8C6CC; --color-dividers-android: #E7E7E7; --color-chat-hover: #F4F4F5; --color-item-active: #EDEDED; --color-gray: #C4C9CC; --color-list-icon: #ABAFB1; --color-active: #00C73E; --color-green: #00C73E; --color-error: #e53935; --color-warning: #fb8c00; --color-placeholders: #a2acb4; --color-heart: #ff3c32; --color-default-shadow: #72727240; --color-light-shadow: #7272722B; --color-composer-button: #707579CC; --color-toast-background: #202020CC; --color-chat-username: #3C7EB0; --color-header: var(--color-background); --color-tabbar: var(--color-background); --color-bubble-in: #FFFFFF; --color-bubble-out-a: #EEFFDE; --color-bubble-out-b: #E1FFC7; --color-bubble-out: #E8FFD2; --action-message-bg: #4A8E3A8C; --wall-a: #bdcd8c; --wall-b: #8eba89; --wall-c: #83b28f; --wall-d: #c5d3b0; --pattern-intensity: .5; --font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Apple Color Emoji", "Segoe UI", Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; --font-family-rounded: "Nunito", "Roboto", "Helvetica Neue", sans-serif; --font-weight-semibold: 500; --font-weight-medium: 500; --border-radius-messages: .9375rem; --border-radius-messages-small: .375rem; --border-radius-default: 1rem; --border-radius-default-small: .625rem; --border-radius-modal: 2rem; --border-radius-button: 1rem; --shadow-pane: 0 1px 5px -1px rgba(0,0,0,.21); --shadow-footer: 0 1px 8px 1px rgba(0,0,0,.12); --shadow-island: 0 1px 4px 0 #0000000D; --header-height: 3.5rem; --tabbar-height: 3.125rem; --composer-height: 3rem; --composer-main: 2.5rem; --composer-pill-radius: 1.5rem; --composer-control-radius: 1.25rem; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --vh: 1vh; --layer-transition: 300ms cubic-bezier(.33, 1, .68, 1); --layer-transition-behind: 300ms cubic-bezier(.33, 1, .68, 1); --slide-transition: 300ms cubic-bezier(.25, 1, .5, 1); --select-transition: 200ms ease-out; --layer-blackout-opacity: .1; --message-text-size: 1rem; --composer-text-size: 1rem; } :root[data-theme="dark"] { --color-bubble-in: #212121; --color-bubble-out-a: #7C6CF5; --color-bubble-out-b: #5B7BFF; --color-bubble-out: #6B73F8; --color-primary: #3E88F7; --color-primary-shade: #2f74dc; --color-primary-tint: #3e88f726; --color-background: #1C1C1E; --color-background-secondary: #000000; --color-background-secondary-accent: #2C2C2E; --color-background-own: #3E5B8C; --color-background-selected: #2C2C2E; --color-text: #FFFFFF; --color-text-secondary: #8E8E93; --color-text-meta: #8E8E93; --color-text-meta-rgb: 142, 142, 147; --color-links: #5AA7FF; --color-own-links: #FFFFFF; --color-accent-own: #FFFFFF; --color-message-meta-own: #FFFFFF99; --color-borders: #3A3A3C; --color-dividers: #3A3A3C; --color-dividers-android: #2C2C2E; --color-chat-hover: #2C2C2E; --color-item-active: #2C2C2E; --color-gray: #636366; --color-list-icon: #8E8E93; --color-active: #3E88F7; --color-default-shadow: #1010109c; --color-light-shadow: #00000040; --color-composer-button: #AAAAAACC; --color-toast-background: #000000CC; --color-chat-username: #E9EEF4; --action-message-bg: #48576166; --wall-a: #0a1118; --wall-b: #0e171f; --wall-c: #121c26; --wall-d: #17222d; --pattern-intensity: 1.3; /* Telegram-dark: navy, not violet; the pattern shows */ } body.is-ios { --font-family: system-ui, -apple-system, BlinkMacSystemFont, "Roboto", "Apple Color Emoji", "Helvetica Neue", sans-serif; --font-weight-semibold: 600; --border-radius-messages: 1rem; --border-radius-messages-small: .5rem; /* the same curve for the layer sliding out and the one sliding in behind it: with two different curves the top layer outruns the one underneath near the end, and for a frame or two the app's background — pure black in the dark theme — shows through */ --layer-transition: 300ms cubic-bezier(.22, 1, .36, 1); --layer-transition-behind: 300ms cubic-bezier(.22, 1, .36, 1); /* 300 ms on the phone too (2026-09-28) */ --slide-transition: 450ms cubic-bezier(.25, 1, .5, 1); --message-text-size: 1.0625rem; --composer-text-size: 1.0625rem; --color-background-own: #DCF8C5; --color-text-meta: #8c8c91; } body.is-ios[data-dark] { --color-background-own: #3E5B8C; --color-text-meta: #8E8E93; } body.is-android { --slide-transition: 350ms cubic-bezier(.16, 1, .3, 1); } /* ---- reset ------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html, body { height: calc(var(--vh) * 100); margin: 0; overflow: hidden; overscroll-behavior: none; } body { font: 400 16px/1.5 var(--font-family); color: var(--color-text); background: var(--color-background-secondary); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; touch-action: pan-x pan-y; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; touch-action: manipulation; } input, textarea { font: inherit; color: inherit; } textarea { resize: none; } a { color: var(--color-links); } [hidden] { display: none !important; } img { max-width: 100%; display: block; } .selectable, .text, .msg-text, .bubble .text { user-select: text; -webkit-user-select: text; } /* ---- the app: a stack of full-height layers ---------------------------- */ #app { position: relative; height: 100%; width: 100%; overflow: hidden; background: var(--color-background-secondary); } #app.booting > * { visibility: hidden; } /* a deep link: the app stays a blank ground until its screen is ready */ .layer { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--color-background-secondary); overflow: hidden; } .layer.chat-layer { background: var(--color-background); } #stack { position: absolute; inset: 0; pointer-events: none; } #stack > .layer { pointer-events: auto; } /* slideLayers: the new screen comes from the right; the one beneath slides 20% away and darkens */ #stack { background: transparent; } .layer.slide-in { animation: slide-in var(--layer-transition) forwards; } .layer.slide-out { animation: slide-in-backwards var(--layer-transition) forwards; } .layer.behind-out { animation: slide-layers-out var(--layer-transition-behind) forwards; } .layer.behind-in { animation: slide-layers-out-backwards var(--layer-transition-behind) forwards; } .layer.dim::after { content: ""; position: absolute; inset: 0; background: #000; opacity: var(--layer-blackout-opacity); pointer-events: none; } @keyframes slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes slide-in-backwards { from { transform: translateX(0); } to { transform: translateX(100%); } } @keyframes slide-layers-out { from { transform: translateX(0); } to { transform: translateX(-20%); } } @keyframes slide-layers-out-backwards { from { transform: translateX(-20%); } to { transform: translateX(0); } } body.is-android .layer.slide-in { animation: android-in var(--slide-transition) forwards; } body.is-android .layer.slide-out { animation: android-out var(--slide-transition) forwards; } body.is-android .layer.behind-out, body.is-android .layer.behind-in { animation: none; } @keyframes android-in { from { transform: translateX(20%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes android-out { from { transform: translateX(0); opacity: 1; } to { transform: translateX(15%); opacity: 0; } } .no-anim .layer { animation: none !important; } /* the thin running line while the network is slow */ #busy { position: absolute; top: var(--safe-top); left: 0; right: 0; height: 2px; z-index: 50; overflow: hidden; background: transparent; } #busy::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; border-radius: 2px; background: var(--color-primary); animation: busy 1.1s ease-in-out infinite; } @keyframes busy { from { left: -40%; } to { left: 100%; } } /* ---- header ----------------------------------------------------------------- */ .hdr { flex: none; display: flex; align-items: center; gap: .25rem; height: calc(var(--header-height) + var(--safe-top)); padding: var(--safe-top) .5rem 0; background: var(--color-header); box-shadow: 0 .5px 0 var(--color-borders); position: relative; z-index: 11; } .hdr .hbtn { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; color: var(--color-primary); flex: none; position: relative; overflow: hidden; } .hdr .hbtn svg { width: 1.5rem; height: 1.5rem; } .hdr .hbtn.secondary { color: var(--color-text-secondary); } .hdr .hbtn:disabled, .hdr .hbtn.off { opacity: .35; } .hdr .htitle { flex: 1; min-width: 0; display: flex; align-items: center; gap: .625rem; padding: 0 .25rem; } .hdr .hlogo { width: 2.125rem; height: 2.125rem; border-radius: 50%; flex: none; object-fit: cover; } .hdr .hname { font-size: 1.0625rem; font-weight: var(--font-weight-semibold); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hdr .hsub { font-size: .8125rem; line-height: 1.2; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hdr .hsub.typing { color: var(--color-primary); } .hdr.center .htitle { justify-content: center; text-align: center; } .hdr .avatar { width: 2.25rem; height: 2.25rem; font-size: 1rem; } .hdr .hchip { display: inline-flex; align-items: center; gap: .3rem; font-size: .8125rem; height: 1.875rem; padding: 0 .75rem 0 .5rem; border-radius: 1rem; background: var(--color-primary-tint); color: var(--color-primary); font-weight: 500; white-space: nowrap; position: relative; overflow: hidden; } .hdr .hchip svg { width: 1rem; height: 1rem; } .pending-count { position: absolute; top: .375rem; right: .375rem; min-width: 1.125rem; height: 1.125rem; padding: 0 .3rem; border-radius: .5625rem; background: var(--color-active); color: #fff; font-size: .6875rem; font-weight: 600; line-height: 1.125rem; text-align: center; } /* ---- the scrolling body of a screen ------------------------------------- */ .scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; } .scroll.pad { padding: .5rem 0 calc(1rem + var(--safe-bottom)); } .scroll.pad.tabbed { padding-bottom: 1rem; } /* ---- tab bar: the floating glass capsule of Telegram on iOS ---------------- */ :root { --tabbar-height: 3.375rem; --tabbar-gap: .625rem; --tabbar-space: calc(var(--tabbar-height) + var(--tabbar-gap) + var(--safe-bottom)); } #tabs { position: absolute; left: .75rem; right: .75rem; bottom: calc(var(--safe-bottom) + var(--tabbar-gap)); height: var(--tabbar-height); z-index: 11; display: flex; align-items: stretch; padding: .25rem; border-radius: 1.75rem; background: color-mix(in srgb, var(--color-tabbar) 72%, transparent); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .16), 0 0 0 .5px rgba(0, 0, 0, .08), inset 0 .5px 0 rgba(255, 255, 255, .5); } :root[data-theme="dark"] #tabs { box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .45), 0 0 0 .5px rgba(255, 255, 255, .12), inset 0 .5px 0 rgba(255, 255, 255, .08); } #tabs button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .0625rem; border-radius: 1.5rem; color: #8E8E93; font-size: .625rem; font-weight: 500; letter-spacing: -.01em; position: relative; -webkit-tap-highlight-color: transparent; } #tabs button svg { width: 1.625rem; height: 1.625rem; transition: transform .18s cubic-bezier(.34, 1.56, .64, 1); } #tabs button .ic-on { display: none; } #tabs button.on { color: var(--color-primary); } #tabs button:active, #tabs button:focus, #tabs button:hover { background: transparent; outline: none; } #tabs button.on .ic-off { display: none; } #tabs button.on .ic-on { display: block; } #tabs button:active svg { transform: scale(.88); } #tabs button i { position: absolute; top: .1875rem; left: calc(50% + .25rem); min-width: 1.125rem; height: 1.125rem; padding: 0 .3rem; border-radius: .5625rem; background: #FF3B30; color: #fff; font-size: .6875rem; font-weight: 600; font-style: normal; line-height: 1.125rem; text-align: center; } /* somebody waits for an anonymous chat: the dice go green and a pulse sits at their corner */ #tabs button.seek:not(.on) { color: #34c759; } #tabs button.seek::after { content: ""; position: absolute; top: .3125rem; left: calc(50% + .5rem); width: .5rem; height: .5rem; border-radius: 50%; background: #34c759; box-shadow: 0 0 0 0 rgba(52, 199, 89, .55); animation: seek-pulse 1.8s ease-out infinite; } @keyframes seek-pulse { 0% { box-shadow: 0 0 0 0 rgba(52, 199, 89, .55); } 70% { box-shadow: 0 0 0 .5rem rgba(52, 199, 89, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0); } } /* and on the tab itself: who, from where */ .s-who { display: flex; align-items: center; gap: .5rem; margin: 0 0 .75rem; padding: .5rem .75rem; border-radius: .75rem; background: rgba(52, 199, 89, .12); color: #34c759; font-size: .875rem; font-weight: 600; line-height: 1.3; } .s-who .dot { position: relative; width: .5rem; height: .5rem; border-radius: 50%; background: #34c759; flex: none; } .s-who .dot::after { content: ""; position: absolute; inset: -.25rem; border-radius: 50%; border: .125rem solid #34c759; opacity: 0; animation: live-pulse 1.8s ease-out infinite; } .s-who b { font-weight: 700; } body.keyboard-visible #tabs { display: none; } body.is-android #tabs { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--color-tabbar); } body.is-android #tabs button { font-size: .6875rem; } .scroll.pad.tabbed { padding-bottom: calc(var(--tabbar-space) + 1rem); } /* ---- list rows (chat list, settings) ---------------------------------------- */ .list-gap { height: .5rem; background: var(--color-background-secondary); } #inbox-list .group-title { background: var(--color-background-secondary); padding-top: .625rem; padding-bottom: .375rem; } #inbox-list { background: var(--color-background-secondary); } #inbox-list .row-item { border-radius: 0; } .group-title { font-size: .8125rem; font-weight: 500; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: .02em; padding: .75rem 1.25rem .3125rem; } /* the search over a long list of cities or universities */ .picker-search { position: sticky; top: 0; z-index: 3; padding: .125rem .75rem .5rem; background: var(--color-background-secondary); } .picker-box { display: flex; align-items: center; gap: .5rem; height: 2.25rem; padding: 0 .625rem; border-radius: .625rem; background: var(--color-background); } :root[data-theme="dark"] .picker-box { background: var(--color-background-secondary-accent); } .picker-box .picker-ico { width: 1.125rem; height: 1.125rem; flex: none; color: var(--color-text-secondary); } .picker-box input { flex: 1; min-width: 0; border: 0; background: transparent; outline: 0; font-size: 1rem; } .picker-box input::placeholder { color: var(--color-text-secondary); } .picker-box input::-webkit-search-cancel-button { display: none; } .picker-clear { flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%; display: grid; place-items: center; background: var(--color-gray); color: var(--color-background); } .picker-clear svg { width: .875rem; height: .875rem; stroke-width: 3; } .picker-empty { padding: 1.5rem 1.25rem; text-align: center; font-size: .9375rem; color: var(--color-text-secondary); } .rows { background: var(--color-background); } .rows.card { margin: 0 .75rem; border-radius: .75rem; overflow: hidden; } .row-item.me { padding: .5rem .75rem; } .row-item.me .avatar { width: 2.75rem; height: 2.75rem; font-size: 1.125rem; } .row-item.me::after { left: 4.25rem; } .row-item { position: relative; display: flex; align-items: center; gap: .75rem; min-height: 3rem; padding: .5625rem; overflow: hidden; background: var(--color-background); color: inherit; width: 100%; text-align: left; } .row-item.chat { padding: .5625rem; } /* where a talk comes from: a small mark in the title and a colour down the row's edge */ .row-item.chat .title .src { flex: none; margin-left: .375rem; padding: .125rem .4375rem; border-radius: .5625rem; font-size: .625rem; font-weight: 700; line-height: 1.2; letter-spacing: .01em; white-space: nowrap; color: #fff; background: var(--src, #8e8e93); } .row-item.chat .title .src.flirt { --src: linear-gradient(135deg, #ff7eb3, #c2337a); } .row-item.chat .title .src.ask { --src: linear-gradient(135deg, #8b7cff, #5a3fd6); } .row-item.chat .title .src.anon { --src: linear-gradient(135deg, #4fa3ff, #2d5fd4); } .row-item.chat .title .src.sup { --src: linear-gradient(135deg, #34c759, #1f8f3f); } .row-item.chat .title .src.mine { --src: linear-gradient(135deg, #3390ec, #1f6fc4); } .row-item.chat .title .src.post { --src: linear-gradient(135deg, #f5a623, #e2720a); } .row-item.chat.src-flirt { box-shadow: inset .1875rem 0 0 #ff7eb3; } .row-item.chat.src-ask { box-shadow: inset .1875rem 0 0 #8b7cff; } .row-item.chat.src-anon { box-shadow: inset .1875rem 0 0 #4fa3ff; } .row-item.chat.src-sup { box-shadow: inset .1875rem 0 0 #34c759; } .row-item.chat.src-mine { box-shadow: inset .1875rem 0 0 #3390ec; } .row-item.chat.src-post { box-shadow: inset .1875rem 0 0 #f5a623; } .row-item::after { content: ""; position: absolute; right: 0; bottom: 0; left: 4.5rem; height: .0625rem; box-shadow: inset 0 -.03125rem 0 0 var(--color-dividers); } body.is-android .row-item::after { box-shadow: inset 0 -.03125rem 0 0 var(--color-dividers-android); } .row-item.no-icon::after { left: 1rem; } .row-item.tap { cursor: pointer; } .row-item.small-icon::after { left: 3.625rem; } .row-item:last-child::after { display: none; } .row-item.active, .row-item:active { background: var(--color-chat-hover); } .row-item .info { flex: 1; min-width: 0; } .row-item .title { display: flex; align-items: baseline; gap: .5rem; } .row-item .title h3 { flex: 1; min-width: 0; margin: 0; font-size: 1rem; font-weight: var(--font-weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .row-item .title time { font-size: .75rem; color: var(--color-text-secondary); flex: none; } .row-item .subtitle { font-size: .9375rem; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: .5rem; } .row-item .subtitle .last { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .row-item .subtitle .last b { font-weight: 400; color: var(--color-text); } .row-item .subtitle .last.unread { color: var(--color-text); } .row-item .badge { flex: none; min-width: 1.375rem; height: 1.375rem; padding: 0 .4375rem; border-radius: .75rem; background: var(--color-active); color: #fff; font-size: .875rem; font-weight: 500; line-height: 1.375rem; text-align: center; } .row-item .badge.muted { background: var(--color-gray); } .row-item .chev { color: var(--color-gray); flex: none; width: 1rem; height: 1rem; } .row-item .ico { width: 1.875rem; height: 1.875rem; border-radius: .5rem; display: grid; place-items: center; color: #fff; font-size: 1rem; flex: none; } .row-item .ico svg { width: 1.25rem; height: 1.25rem; } .row-item.setting { min-height: 2.75rem; padding: .375rem .75rem; gap: .75rem; } .row-item.setting .seg { margin: 0; width: 13rem; max-width: 55%; } .row-item.setting .ico { width: 1.75rem; height: 1.75rem; border-radius: .4375rem; } .row-item.setting .label { flex: 1; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .row-item.setting .label.wrap { white-space: normal; overflow: visible; text-overflow: clip; } .row-item.setting .value { color: var(--color-text-secondary); font-size: .9375rem; } .row-item.danger { color: var(--color-error); } .avatar { width: 3.375rem; height: 3.375rem; border-radius: 50%; flex: none; display: grid; place-items: center; overflow: hidden; font-family: var(--font-family-rounded); font-weight: 700; font-size: 1.375rem; color: #fff; background: linear-gradient(135deg, var(--av-a, #6cc1ff), var(--av-b, #3390ec)); } .avatar img { width: 100%; height: 100%; object-fit: cover; } .avatar.c1 { --av-a: #ff885e; --av-b: #ff516a; } .avatar.c2 { --av-a: #ffcd6a; --av-b: #ffa85c; } .avatar.c3 { --av-a: #82b1ff; --av-b: #665fff; } .avatar.c4 { --av-a: #a0de7e; --av-b: #54cb68; } .avatar.c5 { --av-a: #53edd6; --av-b: #28c9b7; } .avatar.c6 { --av-a: #72d5fd; --av-b: #2a9ef1; } .avatar.c7 { --av-a: #e0a2f3; --av-b: #d669ed; } .avatar.small { width: 2.5rem; height: 2.5rem; font-size: 1rem; } .avatar.team { background: linear-gradient(135deg, #ffb84d, #ff7a45); } .avatar.flirt { background: linear-gradient(135deg, #ff7eb3, #ff5c7a); } .online { position: absolute; width: .875rem; height: .875rem; border-radius: 50%; background: #0ac630; border: 2px solid var(--color-background); left: 3.0625rem; bottom: .5rem; } /* a limited field at its wall: the count under it, a red ring, one shake */ .limit-cnt { margin: .25rem .25rem 0; font-size: .6875rem; color: var(--color-text-secondary); text-align: right; font-variant-numeric: tabular-nums; } .limit-cnt.over { color: var(--color-error); font-weight: 700; } input.limit, textarea.limit { box-shadow: 0 0 0 2px var(--color-error) !important; } .shake { animation: shake .4s cubic-bezier(.36, .07, .19, .97) both; } @keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } } /* ripple */ .ripple { position: relative; overflow: hidden; } .ripple-wave { position: absolute; border-radius: 50%; transform: scale(0); background: var(--ripple-color, rgba(0, 0, 0, .08)); animation: ripple-animation 700ms; pointer-events: none; } :root[data-theme="dark"] .ripple-wave { --ripple-color: rgba(255, 255, 255, .08); } @keyframes ripple-animation { from { transform: scale(0); opacity: 1; } 50% { opacity: 1; } to { transform: scale(2); opacity: 0; } } /* ---- generic blocks --------------------------------------------------------- */ .card { background: var(--color-background); border-radius: var(--border-radius-default-small); margin: 0 .75rem .625rem; padding: .875rem 1rem; } .card.island { box-shadow: var(--shadow-island); } .lead { color: var(--color-text-secondary); font-size: .9375rem; line-height: 1.4; margin: 0; } .strong { font-weight: var(--font-weight-semibold); } .hint { font-size: .8125rem; color: var(--color-text-secondary); line-height: 1.35; } .note { font-size: .8125rem; color: var(--color-text-secondary); text-align: center; padding: .25rem 1.5rem; margin: 0; line-height: 1.4; } .center-text { text-align: center; } .btn { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; height: 3rem; padding: 0 1rem; border-radius: var(--border-radius-default-small); background: var(--color-primary); color: #fff; font-size: 1rem; font-weight: 500; transition: transform .1s ease, opacity .2s ease; position: relative; overflow: hidden; } .btn:active { transform: scale(.98); } .btn:disabled { opacity: .5; } .btn.secondary { background: var(--color-primary-tint); color: var(--color-primary); } .btn.danger { background: var(--color-error); } .btn.plain { background: transparent; color: var(--color-primary); height: 2.75rem; } .btn.plain.danger { color: var(--color-error); } .btn.small { height: 2.25rem; font-size: .9375rem; width: auto; padding: 0 1rem; display: inline-flex; } .btn svg { width: 1.375rem; height: 1.375rem; stroke-width: 2.2; } .capsule { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 2.5rem; padding: 0 1rem; border-radius: 1.25rem; background: var(--color-primary-tint); color: var(--color-primary); font-size: .9375rem; font-weight: 500; position: relative; overflow: hidden; } .capsule svg { width: 1.125rem; height: 1.125rem; } .capsule i { font-style: normal; font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: .125rem .5rem; border-radius: .625rem; background: var(--color-primary); color: #fff; } .capsule.soon { color: var(--color-text-secondary); background: var(--color-background-secondary); margin: .625rem auto 0; display: flex; width: fit-content; } .capsule.soon i { background: var(--color-gray); } .capsule.wide { display: flex; margin: .25rem auto 0; width: fit-content; background: transparent; } .btn-row { display: flex; gap: .5rem; padding: 0 .75rem .625rem; } .btn-row .btn { flex: 1; } .pill { display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .75rem; border-radius: 1rem; background: var(--color-primary-tint); color: var(--color-primary); font-size: .875rem; font-weight: 500; white-space: nowrap; position: relative; overflow: hidden; } .pill.fill { background: var(--color-primary); color: #fff; } .pill.danger { background: #e5393520; color: var(--color-error); } .pill.gray { background: var(--color-background-secondary-accent); color: var(--color-text-secondary); } :root[data-theme="dark"] .pill.gray { background: #ffffff14; } .pill.on { background: var(--color-primary); color: #fff; } .pills { display: flex; flex-wrap: wrap; gap: .5rem; padding: .25rem .75rem .625rem; } /* the inbox folders, Telegram's way: words in a row, the open one in the accent colour, a bar under it that slides */ .folders { position: sticky; top: 0; z-index: 3; display: flex; align-items: stretch; gap: 0; padding: 0 .5rem; overflow-x: auto; scrollbar-width: none; background: var(--color-background); box-shadow: 0 .5px 0 var(--color-borders); } .folders::-webkit-scrollbar { display: none; } .folders .folder { flex: none; display: inline-flex; align-items: center; gap: .375rem; height: 2.75rem; padding: 0 .75rem; font-size: .9375rem; font-weight: 600; color: var(--color-text-secondary); white-space: nowrap; position: relative; overflow: hidden; border-radius: .5rem .5rem 0 0; transition: color .2s ease; } .folders .folder.on { color: var(--color-primary); } .folders .folder .n { display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .375rem; border-radius: .625rem; background: var(--color-text-secondary); color: #fff; font-style: normal; font-size: .6875rem; font-weight: 700; line-height: 1; transition: background .2s ease; } .folders .folder.on .n { background: var(--color-primary); } .match-title { display: flex; align-items: center; justify-content: space-between; } .match-title .match-all { display: inline-flex; align-items: center; gap: .125rem; font-size: .8125rem; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--color-primary); position: relative; overflow: hidden; border-radius: .5rem; padding: .125rem .375rem; } .match-title .match-all svg { width: .875rem; height: .875rem; } .folders .ind { position: absolute; left: 0; bottom: 0; height: .1875rem; width: 0; border-radius: .1875rem .1875rem 0 0; background: var(--color-primary); transition: transform .28s cubic-bezier(.32, .72, 0, 1), width .28s cubic-bezier(.32, .72, 0, 1); pointer-events: none; } .pills .pill { padding: .5rem 1rem; font-size: .9375rem; font-weight: 600; } .seg { display: flex; margin: .5rem .75rem; padding: .125rem; border-radius: .5625rem; background: rgba(118, 118, 128, .12); } :root[data-theme="dark"] .seg { background: rgba(118, 118, 128, .24); } .seg button { flex: 1; height: 2rem; border-radius: .4375rem; font-size: .8125rem; font-weight: 500; color: var(--color-text); position: relative; transition: background .2s ease, box-shadow .2s ease, transform .1s ease; white-space: nowrap; } .seg button:active { transform: scale(.97); } /* the moderation groups: one row that scrolls sideways, every name whole, the count beside it */ .seg.adm-groups { overflow-x: auto; scrollbar-width: none; justify-content: flex-start; padding: .125rem; } .seg.adm-groups::-webkit-scrollbar { display: none; } .seg.adm-groups button { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: .25rem; padding: 0 .75rem; font-size: .8125rem; } .seg.adm-groups button i { position: static; display: inline-grid; place-items: center; min-width: 1.0625rem; height: 1.0625rem; padding: 0 .25rem; border-radius: .53125rem; } .seg button.on { background: #fff; color: #000; font-weight: 600; box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 3px 1px rgba(0, 0, 0, .04); } :root[data-theme="dark"] .seg button.on { background: #636366; color: #fff; } .seg button i { position: absolute; top: -.375rem; right: -.25rem; min-width: 1rem; height: 1rem; padding: 0 .25rem; border-radius: .5rem; background: var(--color-active); color: #fff; font-size: .625rem; font-weight: 600; font-style: normal; line-height: 1rem; } /* Folder tabs of the moderation screen: one row that scrolls, the count next to the name, a bar under the active one */ .ftabs { display: flex; flex-wrap: wrap; gap: .375rem; padding: 0 .75rem; margin: 0 0 .5rem; } .ftabs button { display: inline-flex; align-items: center; gap: .3125rem; height: 1.875rem; padding: 0 .625rem; border-radius: .9375rem; font-size: .8125rem; font-weight: 600; color: var(--color-primary); background: var(--color-primary-tint); white-space: nowrap; transition: background .15s ease, color .15s ease, transform .1s ease; } .ftabs button:active { transform: scale(.96); } .ftabs button.on { color: #fff; background: var(--color-primary); } .ftabs button i { font-style: normal; min-width: 1.125rem; height: 1.125rem; padding: 0 .3125rem; border-radius: .5625rem; background: var(--color-primary); color: #fff; font-size: .6875rem; font-weight: 600; line-height: 1.125rem; text-align: center; } .ftabs button.on i { background: #fff; color: var(--color-primary); } .empty { text-align: center; padding: 3rem 2rem; color: var(--color-text-secondary); } .empty .mark { font-size: 3rem; line-height: 1; margin-bottom: .75rem; } .empty .strong { color: var(--color-text); font-size: 1.0625rem; margin-bottom: .25rem; } .skeleton { height: 4.5rem; margin: 0 .75rem .5rem; border-radius: var(--border-radius-default-small); background: linear-gradient(90deg, var(--color-background) 25%, var(--color-background-secondary-accent) 50%, var(--color-background) 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; } @keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } .arrive > * { animation: arrive .25s ease both; animation-delay: calc(var(--i, 0) * 30ms); } @keyframes arrive { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .spinner { width: 1.5rem; height: 1.5rem; border: 2.5px solid var(--color-primary-tint); border-top-color: var(--color-primary); border-radius: 50%; animation: spin .8s linear infinite; } .spinner.small { width: 1.125rem; height: 1.125rem; border-width: 2px; } @keyframes spin { to { transform: rotate(360deg); } } .center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem; gap: .75rem; flex: 1; } .center .mark { font-size: 4rem; line-height: 1; } /* The composer («Новий допис», 2026-09-23): one island that reads like a message being written. */ /* ---- the composer as a scene (2026-09-25): the queue alive on top, the post as it will hang on the wall, one button ---- */ .wscene, .wscene * { touch-action: manipulation; } .wscene.busy { pointer-events: none; } .wscene.busy textarea { opacity: .6; } /* the queue: one line, the number and when yours comes; the gold switch under it. Never folds. */ .wq { position: sticky; top: 0; z-index: 5; overflow: hidden; margin: .5rem .75rem .5rem; padding: .5rem .75rem .5rem; border-radius: 1rem; color: #fff; background: #17163a; box-shadow: 0 .5rem 1.5rem rgba(23, 22, 58, .3); isolation: isolate; transition: background .5s ease, box-shadow .5s ease, transform .28s cubic-bezier(.32, .72, 0, 1), opacity .28s ease; } .wq-aurora { position: absolute; inset: -60%; z-index: -1; background: radial-gradient(40% 50% at 20% 30%, #7b5cff 0, transparent 60%), radial-gradient(35% 45% at 80% 20%, #3390ec 0, transparent 60%), radial-gradient(45% 55% at 60% 90%, #ff5fa2 0, transparent 60%); filter: blur(28px) saturate(1.2); opacity: .85; animation: wq-aurora 14s ease-in-out infinite alternate; transition: background .6s ease; } @keyframes wq-aurora { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(12deg) scale(1.12) translate(3%, -2%); } 100% { transform: rotate(-8deg) scale(1.05) translate(-3%, 3%); } } .wq.gold { background: #2a1b05; box-shadow: 0 .5rem 1.5rem rgba(245, 166, 35, .4); } .wq.gold .wq-aurora { background: radial-gradient(45% 55% at 25% 30%, #ffb340 0, transparent 60%), radial-gradient(40% 50% at 80% 25%, #ff7a18 0, transparent 60%), radial-gradient(45% 55% at 60% 90%, #ffd166 0, transparent 60%); } .wq-head { display: flex; align-items: center; justify-content: space-between; gap: .625rem; min-height: 1.75rem; } .wq-num { display: flex; align-items: center; gap: .375rem; min-width: 0; white-space: nowrap; } .wq-num i { flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: #4cff8f; animation: wq-live 1.8s ease-out infinite; } @keyframes wq-live { 0% { box-shadow: 0 0 0 0 rgba(76, 255, 143, .7); } 100% { box-shadow: 0 0 0 .5rem rgba(76, 255, 143, 0); } } .wq-num b { display: inline-block; font-size: 1.5rem; line-height: 1; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; text-shadow: 0 .125rem .75rem rgba(0, 0, 0, .35); } .wq-num b.pop { animation: wq-pop .55s cubic-bezier(.2, 1.6, .4, 1); } @keyframes wq-pop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } } .wq-num span { font-size: .8125rem; opacity: .85; } .wq-eta { flex: none; max-width: 52%; font-size: .8125rem; font-weight: 600; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wq-eta span { display: inline-block; transition: opacity .16s ease, transform .16s ease; } .wq-eta.swap span { opacity: 0; transform: translateY(.375rem); } .wq.far .wq-eta { color: #ffd166; } .wq.gold .wq-eta { color: #fff; } /* «без черги» on the scene itself */ .wq-prio { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; padding: .375rem .5rem .375rem .5rem; border-radius: .875rem; background: rgba(255, 255, 255, .12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .18); position: relative; overflow: hidden; cursor: pointer; transition: background .3s ease, box-shadow .3s ease; } .wq.gold .wq-prio { background: rgba(255, 209, 102, .2); box-shadow: inset 0 0 0 .5px rgba(255, 209, 102, .55); } .wq-prio .ico { flex: none; width: 1.875rem; height: 1.875rem; border-radius: .625rem; display: grid; place-items: center; background: linear-gradient(135deg, #ffb340, #f28b00); color: #fff; box-shadow: 0 .25rem .75rem rgba(242, 139, 0, .45); } .wq-prio .ico svg { width: 1.0625rem; height: 1.0625rem; } .wq-prio .t { flex: 1; min-width: 0; line-height: 1.2; } .wq-prio .t b { display: block; font-size: .875rem; font-weight: 700; } .wq-prio .t span { display: block; font-size: .6875rem; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wq-prio.done .t b { color: #ffd166; } .wq-q { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 700; color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .16); position: relative; overflow: hidden; } .wq-sw { flex: none; width: 3.125rem; height: 1.875rem; padding: 0; border: 0; border-radius: 1rem; background: rgba(255, 255, 255, .28); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .35); position: relative; cursor: pointer; transition: background .25s ease, box-shadow .25s ease; } .wq-sw .knob { position: absolute; top: .1875rem; left: .1875rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #fff; box-shadow: 0 .1875rem .5rem rgba(0, 0, 0, .35); transition: transform .3s cubic-bezier(.34, 1.4, .4, 1); } .wq-sw .knob::after { content: "⭐"; position: absolute; inset: 0; display: grid; place-items: center; font-size: .6875rem; opacity: 0; transition: opacity .2s ease; } .wq-sw.on { background: #ffd166; box-shadow: 0 0 0 .1875rem rgba(255, 209, 102, .3); } .wq-sw.on .knob { transform: translateX(1.25rem); } .wq-sw.on .knob::after { opacity: 1; } /* the post as it will hang on the wall, its tools and its button in its own foot */ .wp { position: relative; margin: 0 .75rem; border-radius: 1.125rem; background: var(--color-bubble-in); box-shadow: var(--shadow-island), 0 0 0 .5px var(--color-borders); overflow: hidden; transition: transform .28s cubic-bezier(.32, .72, 0, 1), opacity .28s ease; } .wp.fly, .wq.fly { transform: translateY(-2.5rem) scale(.94); opacity: 0; } .wp-head { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem 0; } .wp-mask { flex: none; width: 1.625rem; height: 1.625rem; border-radius: 50%; display: grid; place-items: center; font-size: .875rem; background: linear-gradient(135deg, var(--color-primary), #7b5cff); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .25); } .wp-name { font-size: .875rem; font-weight: 600; color: var(--color-chat-username); } .wp-tag { margin-left: auto; display: inline-flex; align-items: center; gap: .25rem; max-width: 55%; height: 1.625rem; padding: 0 .5rem 0 .625rem; border-radius: .8125rem; background: var(--color-primary-tint); color: var(--color-primary); font-size: .75rem; font-weight: 600; position: relative; overflow: hidden; } .wp-tag span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wp-tag svg { flex: none; width: .75rem; height: .75rem; opacity: .8; } .wp-quote { display: flex; align-items: center; gap: .5rem; margin: .5rem .75rem 0; padding: .375rem .625rem .375rem .75rem; border-radius: .5rem; background: var(--color-primary-tint); border-left: 3px solid var(--color-primary); } .wp-quote .t { flex: 1; min-width: 0; line-height: 1.25; } .wp-quote b { display: block; font-size: .75rem; color: var(--color-primary); } .wp-quote span { display: block; font-size: .8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wp-quote .x { flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; color: var(--color-text-secondary); position: relative; overflow: hidden; } .wp-quote .x svg { width: 1rem; height: 1rem; } .wp-pic { display: flex; align-items: center; gap: .625rem; margin: .5rem .75rem 0; padding: .375rem; border-radius: .75rem; background: var(--color-background-secondary); } :root[data-theme="dark"] .wp-pic { background: var(--color-background-secondary-accent); } .wp-pic img { flex: none; width: 2.75rem; height: 2.75rem; object-fit: cover; border-radius: .5rem; } .wp-pic .t { flex: 1; min-width: 0; line-height: 1.25; } .wp-pic b { display: block; font-size: .8125rem; font-weight: 600; } .wp-pic span { display: block; font-size: .6875rem; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wp-pic .x { flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; color: var(--color-text-secondary); position: relative; overflow: hidden; } .wp-pic .x svg { width: 1rem; height: 1rem; } .wp textarea { display: block; width: 100%; border: 0; background: transparent; outline: 0; padding: .5rem .75rem .25rem; font-size: 1.0625rem; line-height: 1.45; height: 6.5rem; overflow-y: auto; resize: none; color: var(--color-text); -webkit-text-fill-color: var(--color-text); caret-color: var(--color-primary); } .wp textarea::placeholder { color: var(--color-placeholders); -webkit-text-fill-color: var(--color-placeholders); opacity: 1; } .wp-bar { display: flex; align-items: center; gap: .375rem; padding: .375rem .5rem .5rem; } .wp-bar .offscreen { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; left: -9999px; } .wp-bar .ib { flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; color: var(--color-primary); background: var(--color-primary-tint); position: relative; overflow: hidden; transition: background .2s ease, color .2s ease; } .wp-bar .ib svg { width: 1.1875rem; height: 1.1875rem; } .wp-bar .ib.on { background: var(--color-primary); color: #fff; } .wp-bar .cnt { margin-left: .25rem; font-size: .6875rem; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; } .wp-bar .cnt.over { color: var(--color-error); font-weight: 700; } .wp-send { margin-left: auto; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: .375rem; height: 2.375rem; padding: 0 .875rem 0 1rem; border-radius: 1.1875rem; background: var(--color-primary); color: #fff; font-size: .875rem; font-weight: 600; white-space: nowrap; position: relative; overflow: hidden; box-shadow: 0 .375rem 1rem rgba(51, 144, 236, .3); transition: background .25s ease, box-shadow .25s ease, opacity .2s ease; } .wp-send svg { width: 1rem; height: 1rem; } .wp-send:active { transform: scale(.97); } .wp-send.off { opacity: .5; box-shadow: none; } .wp-send.gold { background: linear-gradient(135deg, #ffb340, #f28b00); box-shadow: 0 .375rem 1rem rgba(245, 166, 35, .45); } .wfoot { text-align: center; font-size: .6875rem; color: var(--color-text-secondary); margin: .5rem 1.25rem 1rem; line-height: 1.5; } .wfoot a { color: var(--color-primary); text-decoration: none; font-weight: 500; } @keyframes qn-pulse { 0%, 100% { box-shadow: 0 0 0 0 #fb8c0055; } 50% { box-shadow: 0 0 0 .375rem #fb8c0000; } } .form-field { background: var(--color-background); margin: 0 .75rem .625rem; border-radius: var(--border-radius-default-small); padding: .75rem 1rem; } .form-field label { display: block; font-size: .75rem; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: .02em; margin-bottom: .25rem; } .form-field input, .form-field textarea { width: 100%; border: 0; background: transparent; outline: 0; font-size: 1.0625rem; padding: .25rem 0; } .form-field textarea { min-height: 6rem; line-height: 1.35; } .form-field .count { text-align: right; font-size: .75rem; color: var(--color-text-secondary); } .strip { display: flex; align-items: center; gap: .75rem; margin: .5rem .75rem; padding: .625rem .875rem; border-radius: var(--border-radius-default-small); background: #fb8c001a; color: var(--color-text); font-size: .875rem; } .strip .btn { width: auto; height: 2rem; padding: 0 .75rem; font-size: .8125rem; flex: none; } /* ---- wall (channel-like feed) ---------------------------------------------- */ /* ---- the wall as a Telegram channel ------------------------------------------- */ .wall-chat { position: absolute; inset: 0; overflow: hidden; } .wall-chat .chat-bg { z-index: 0; } /* bottom-up: the scroll origin is the bottom, so older posts added above never move what is on screen */ .wmsgs { position: absolute; inset: 0; z-index: 1; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; display: flex; flex-direction: column-reverse; padding: 0; } .wmsgs > .wcol { display: flex; flex-direction: column; flex: none; padding: .5rem .5rem calc(var(--tabbar-space) + 4.5rem); } .wmsgs .fill { flex: 1; } .wmsgs { overflow-anchor: none; } /* the page holds the view itself when older posts come in above; the browser must not do it twice */ .wmsgs .msg { margin-bottom: .625rem; } .wmsgs .bubble { max-width: min(29rem, calc(100vw - 3.25rem)); width: min(29rem, calc(100vw - 3.25rem)); padding: 0; overflow: hidden; } .wmsgs .bubble { -webkit-touch-callout: none; } .wmsgs .bubble, .wmsgs .bubble .text { user-select: none; -webkit-user-select: none; } /* a hold opens the menu, it does not select words; «Копіювати текст» is in the menu */ /* the message menu */ .ctx-root { position: fixed; inset: 0; z-index: 1530; } .ctx-back { position: absolute; background: transparent; box-shadow: 0 0 0 200vmax rgba(0, 0, 0, .45); opacity: 0; transition: opacity .2s ease; pointer-events: none; } .ctx-root.open .ctx-back { opacity: 1; } .ctx-catch { position: absolute; inset: 0; z-index: 1; } /* while the menu is up the wall's own floating things step aside and come back after */ .wall-write, .wall-chat .feedseg, .wall-chat .feednote, .wall-chat .scroll-down { transition: opacity .18s ease, transform .18s ease; } body.ctx-open .wall-write, body.ctx-open .wall-chat .feedseg, body.ctx-open .wall-chat .feednote, body.ctx-open .wall-chat .scroll-down { opacity: 0; pointer-events: none; } body.ctx-open .wall-write { transform: translateY(1rem); } .wmsgs .bubble .media { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; } /* a held photo opens our menu, not the system one */ .ctx-menu { position: fixed; z-index: 2; padding: .375rem; border-radius: 1rem; background: color-mix(in srgb, var(--color-background) 88%, transparent); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); box-shadow: 0 .75rem 2.5rem rgba(0, 0, 0, .35), 0 0 0 .5px rgba(0, 0, 0, .08); opacity: 0; transform: scale(.7); transition: opacity .18s ease, transform .22s cubic-bezier(.32, .72, 0, 1); } .ctx-root.open .ctx-menu { opacity: 1; transform: scale(1); } .ctx-item { display: flex; align-items: center; gap: .875rem; width: 100%; height: 2.75rem; padding: 0 .875rem; border-radius: .625rem; color: var(--color-text); font-size: 1.0625rem; text-align: left; position: relative; overflow: hidden; } .ctx-item svg { width: 1.375rem; height: 1.375rem; flex: none; color: var(--color-text-secondary); stroke-width: 1.8; } .ctx-item.danger, .ctx-item.danger svg { color: var(--color-error); } .ctx-item:active { background: var(--color-item-active); } .wmsgs .bubble > .body { padding: .3125rem .5rem .375rem; } .wmsgs .bubble .name { padding: .125rem 0 .0625rem; } .wmsgs .bubble .media { width: 100%; max-height: 70vh; object-fit: cover; display: block; cursor: zoom-in; background: var(--color-background-secondary-accent); } .wmsgs .bubble .media + .body { padding-top: .375rem; } .wmsgs .bubble .text::after { width: 4rem; } .wmsgs .bubble .kind { color: var(--color-text-secondary); font-size: .9375rem; } .wmsgs .bubble .reacts { display: flex; flex-wrap: wrap; gap: .25rem; padding: .25rem 0 .125rem; } .wmsgs .bubble .react.tap { cursor: pointer; position: relative; overflow: hidden; } .wmsgs .bubble .react.own { background: var(--color-primary); color: #fff; } .wmsgs .bubble .react.views { background: transparent; color: var(--color-text-secondary); padding: 0 .125rem 0 .25rem; margin-left: auto; display: inline-flex; align-items: center; gap: .3125rem; } .wmsgs .bubble .react.views svg { width: .9375rem; height: .9375rem; flex: none; } .count.over { color: var(--color-error); font-weight: 600; } .count.note { margin-top: .375rem; line-height: 1.3; } .wmsgs .bubble .react { display: inline-flex; align-items: center; gap: .25rem; height: 1.625rem; padding: 0 .625rem 0 .5rem; border-radius: .8125rem; background: var(--color-primary-tint); color: var(--color-primary); font-size: .875rem; font-weight: 500; } .wmsgs .bubble .meta { position: static; float: right; margin: .125rem 0 0 .5rem; height: 1rem; } .wmsgs .bubble .meta .views { display: inline-flex; align-items: center; gap: .125rem; } .wmsgs .bubble .meta .views svg { width: .875rem; height: .875rem; } .wmsgs .ikb { display: flex; flex-direction: column; gap: .25rem; width: min(29rem, calc(100vw - 3.25rem)); margin-top: .3125rem; } .wmsgs .ikb button { height: 2.375rem; border-radius: .625rem; background: rgba(255, 255, 255, .72); color: var(--color-primary); font-size: .9375rem; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: .375rem; position: relative; overflow: hidden; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background .15s ease; } :root[data-theme="dark"] .wmsgs .ikb button { background: rgba(255, 255, 255, .16); color: #fff; } .wmsgs .ikb button:active { background: rgba(255, 255, 255, .9); } :root[data-theme="dark"] .wmsgs .ikb button:active { background: rgba(255, 255, 255, .28); } .wmsgs .msg.last { margin-bottom: 0; } .wmsgs .wall-col { margin-bottom: 1rem; } .wmsgs .msg + .msg { margin-top: 0; } .wmsgs .wall-col { display: flex; flex-direction: column; align-items: flex-start; } /* a post someone was sent to: the whole row washed in the accent, fading out — as Telegram lights up a message */ .wmsgs .wall-col { position: relative; isolation: isolate; } .wmsgs .wall-col.flash::before { content: ""; position: absolute; inset: -.375rem -.75rem; border-radius: .875rem; background: var(--color-primary); z-index: -1; pointer-events: none; animation: wall-flash 2.6s ease-out forwards; } @keyframes wall-flash { 0% { opacity: .55; } 45% { opacity: .45; } 100% { opacity: 0; } } .wall-chat .scroll-down { bottom: calc(var(--tabbar-space) + 4.75rem); } /* while a random-chat search runs, its floating bar sits where the write button is and over the last post's buttons: the button moves up above it and the list gets room, so «Показати в каналі» stays tappable */ body.searching .wall-write { bottom: calc(var(--tabbar-space) + 4.5rem); } body.searching .wmsgs > .wcol { padding-bottom: calc(var(--tabbar-space) + 8.5rem); } body.searching .wall-chat .scroll-down { bottom: calc(var(--tabbar-space) + 8.75rem); } /* the wide «write» pill above the tab bar, shaped like a composer */ /* «Написати своє на стіну» (2026-09-24): a gradient pill with a white pencil button — one light sweep every few seconds is the only motion; anything more made the wall stutter. */ .wall-write { position: absolute; left: .75rem; right: .75rem; bottom: calc(var(--tabbar-space) + .625rem); z-index: 5; height: 3.375rem; border-radius: 1.6875rem; display: flex; align-items: center; gap: .625rem; padding: 0 .375rem 0 1.25rem; color: #fff; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; background: linear-gradient(120deg, #3390ec, #5b6cff 55%, #8a5cff); box-shadow: 0 .625rem 1.5rem rgba(51, 144, 236, .38), 0 0 0 .5px rgba(255, 255, 255, .18), inset 0 .5px 0 rgba(255, 255, 255, .35); overflow: hidden; isolation: isolate; } :root[data-theme="dark"] .wall-write { box-shadow: 0 .625rem 1.5rem rgba(51, 144, 236, .3), 0 0 0 .5px rgba(255, 255, 255, .14), inset 0 .5px 0 rgba(255, 255, 255, .22); } .wall-write::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .38) 50%, transparent 65%); transform: translateX(-120%); animation: ww-sweep 5s ease-in-out infinite; will-change: transform; pointer-events: none; } .wall-write .txt { flex: 1; text-align: left; position: relative; text-shadow: 0 1px 1px rgba(0, 0, 0, .12); } .wall-write .go { width: 2.625rem; height: 2.625rem; border-radius: 50%; background: #fff; color: var(--color-primary); display: grid; place-items: center; flex: none; position: relative; box-shadow: 0 .25rem .625rem rgba(0, 0, 0, .18); } .wall-write .go svg { width: 1.3125rem; height: 1.3125rem; stroke-width: 2.2; } .wall-write:active { transform: scale(.97); } @keyframes ww-sweep { 0%, 60% { transform: translateX(-120%); } 90%, 100% { transform: translateX(120%); } } @media (prefers-reduced-motion: reduce) { .wall-write::before { animation: none; } } .wall-chat .hero-empty { align-self: center; margin: auto; } /* the pattern is drawn in black; on the dark navy it has to be light, as Telegram's is */ /* the feed switch above the wall */ /* the two walls: a switch across the whole width, tall enough to be the wall's own header */ .wall-chat .feedseg { position: absolute; top: .5rem; left: .75rem; right: .75rem; transform: none; z-index: 5; margin: 0; width: auto; padding: .1875rem; border-radius: .875rem; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); background: rgba(118, 118, 128, .32); box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .12), inset 0 .5px 0 rgba(255, 255, 255, .25); } .wall-chat .feedseg button { height: 2.375rem; border-radius: .6875rem; font-size: .875rem; font-weight: 600; padding: 0 .25rem; } /* the third feed of the tab: the «Запитай мене» section in place of the posts; the field and the arrow go with them */ .wall-chat .wask { display: none; position: absolute; inset: 0; z-index: 1; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 3.25rem 0 calc(var(--tabbar-space) + 1rem); background: var(--color-background-secondary); } .wall-chat.asking .wask { display: block; } .wall-chat.asking .wmsgs, .wall-chat.asking .wall-write, .wall-chat.asking .scroll-down { display: none; } /* the ground stays (2026-09-27): hiding and showing it again was the blink on every switch */ .wall-chat .feedseg button.on { box-shadow: 0 3px 10px rgba(0, 0, 0, .18), 0 1px 1px rgba(0, 0, 0, .06); } .wall-chat .feedseg button { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); } .wall-chat .feedseg button.on { color: #000; text-shadow: none; } .wall-chat.with-seg .wmsgs > .wcol { padding-top: 3.75rem; } /* the line under the switch on the second wall */ .wall-chat .feednote { position: absolute; top: 3.5rem; left: .75rem; right: .75rem; transform: none; z-index: 5; width: auto; padding: .375rem .75rem; border-radius: .75rem; background: rgba(0, 0, 0, .34); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: rgba(255, 255, 255, .92); font-size: .8125rem; line-height: 1.3; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); } /* as wide as the switch above, one line */ .wall-chat.with-seg.noted .wmsgs > .wcol { padding-top: 6rem; } .wall-bg { background: var(--color-background-secondary); } .post { margin: .375rem .5rem; background: var(--color-background); border-radius: var(--border-radius-messages); box-shadow: 0 1px 2px var(--color-default-shadow); overflow: hidden; position: relative; } .post .post-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .375rem .625rem 0; } .post .post-tag { font-size: .875rem; font-weight: 500; color: var(--color-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .post .post-time { font-size: .75rem; color: var(--color-text-secondary); flex: none; } .post .post-photo { margin-top: .375rem; max-height: 60vh; object-fit: cover; width: 100%; cursor: zoom-in; } .post .text { padding: .3125rem .625rem .375rem; font-size: var(--message-text-size); line-height: 1.3125; white-space: pre-wrap; word-break: break-word; } .post .kind { padding: .5rem .625rem; color: var(--color-text-secondary); font-size: .9375rem; } .post .post-foot { display: flex; align-items: center; gap: .5rem; padding: .25rem .625rem .5rem; } .post .reactions { display: flex; gap: .375rem; flex: 1; } .post .reaction { display: inline-flex; align-items: center; gap: .25rem; height: 1.75rem; padding: 0 .625rem; border-radius: .875rem; background: var(--color-primary-tint); color: var(--color-primary); font-size: .875rem; font-weight: 500; } .post .post-btns { display: flex; flex-direction: column; gap: .1875rem; padding: 0 .1875rem .1875rem; } .post .ibtn { height: 2.25rem; border-radius: .5rem; background: var(--color-background-secondary); color: var(--color-primary); font-size: .9375rem; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: .375rem; position: relative; overflow: hidden; } :root[data-theme="dark"] .post .ibtn { background: #ffffff0f; } /* ---- chat --------------------------------------------------------------------- */ .chat-layer { --composer-reserve: calc(var(--composer-height) + .5rem + var(--safe-bottom)); } /* The chat's ground, as Telegram Web draws it (2026-09-27): the swirl gradient (an image made in app.js), stretched to 150 % and shifted up a quarter, the doodles over it. */ .chat-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #dbddbb; } :root[data-theme="dark"] .chat-bg { background: #182036; } .chat-bg .grad { position: absolute; left: 0; top: -25%; width: 100%; height: 150%; display: none; pointer-events: none; } .chat-bg .grad.light { display: block; } :root[data-theme="dark"] .chat-bg .grad.light { display: none; } :root[data-theme="dark"] .chat-bg .grad.dark { display: block; } .chat-bg .pat { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: soft-light; opacity: .68; display: none; } /* a bitmap painted in app.js (paintPattern), not a vector background: the vector made every scroll frame crawl */ .chat-bg .pat.light { display: block; } :root[data-theme="dark"] .chat-bg .pat.light { display: none; } :root[data-theme="dark"] .chat-bg .pat.dark { display: block; opacity: .5; } /* the night the iOS way (tweb's overlay path): white doodles, soft-light over the full gradient, intensity 38–40 */ .chat-layer .hdr { background: color-mix(in srgb, var(--color-header) 92%, transparent); backdrop-filter: none; } /* bottom-up as well: an older page above never moves the lines on screen */ .msgs { position: relative; z-index: 1; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; display: flex; flex-direction: column-reverse; padding: 0; } .msgs > .mcol { display: flex; flex-direction: column; flex: none; padding: .5rem .5rem calc(var(--composer-reserve) + .5rem); } body.keyboard-visible .msgs > .mcol { padding-bottom: calc(var(--composer-height) + 1rem); } .msgs .fill { flex: 1; } .msgs { overflow-anchor: none; } /* the page holds the view itself when older lines come in above */ /* the older-page spinner: stuck to the top of the list, no height of its own, so it never moves a line */ .msgs .older { position: sticky; top: 0; height: 0; flex: none; overflow: visible; display: flex; justify-content: center; z-index: 3; } .msgs .older i { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin-top: .375rem; border-radius: 50%; background: rgba(0, 0, 0, .38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: pop-in .2s ease-out; } .msgs .older .spinner { width: 1rem; height: 1rem; border-width: 2px; border-color: rgba(255, 255, 255, .28); border-top-color: #fff; } /* while a conversation loads: a dark translucent disc with a white ring, centred over the pattern, as Telegram does */ .chat-load { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; pointer-events: none; transition: opacity .25s ease; } .chat-load.gone { opacity: 0; } .chat-load i { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: rgba(0, 0, 0, .38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: pop-in .25s cubic-bezier(.34, 1.56, .64, 1); } .chat-load .spinner { width: 1.375rem; height: 1.375rem; border-width: 2.5px; border-color: rgba(255, 255, 255, .28); border-top-color: #fff; } .pin-post { flex: none; display: flex; align-items: center; gap: .625rem; padding: .375rem .625rem .375rem .75rem; background: var(--color-header); box-shadow: 0 .5px 0 var(--color-borders); position: relative; z-index: 10; cursor: pointer; } .pin-post .pin-body { flex: 1; min-width: 0; border-left: 2px solid var(--color-primary); padding-left: .5rem; } .pin-post .pin-label { color: var(--color-primary); font-weight: 500; font-size: .8125rem; line-height: 1.2; } .pin-post .pin-text { font-size: .9375rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--color-text); } .pin-post.open .pin-text { white-space: pre-wrap; word-break: break-word; max-height: 40vh; overflow-y: auto; } .pin-post .pin-open { width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; color: var(--color-primary); flex: none; position: relative; overflow: hidden; } .pin-post .pin-open svg { width: 1.25rem; height: 1.25rem; } .sticky-date, .sys { align-self: center; margin: .5rem 0 .75rem; font-size: calc(var(--message-text-size) - .0625rem); line-height: 1.25; text-align: center; pointer-events: none; } .sticky-date > span, .sys > span { display: inline-block; padding: .1875rem .5rem; border-radius: var(--border-radius-messages); color: #fff; background: var(--action-message-bg); font-weight: 500; } .sys > span { font-weight: 400; max-width: 80vw; } .sticky-date.stuck { position: sticky; top: .25rem; z-index: 2; } .msg { position: relative; display: flex; align-items: flex-end; margin-bottom: .25rem; max-width: 100%; animation: msg-in .2s ease-out; transform-origin: bottom left; } .msg.last-in-group { margin-bottom: .75rem; } /* more air between the two sides (2026-10-19, the owner) */ .msg.own { flex-direction: row-reverse; transform-origin: bottom right; } @keyframes msg-in { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } } .bubble { --bg: var(--color-bubble-in); position: relative; max-width: min(29rem, calc(100vw - 3.75rem)); padding: .3125rem .5rem .375rem; background: var(--bg); border-radius: var(--border-radius-messages); box-shadow: 0 1px 2px var(--color-default-shadow); font-size: var(--message-text-size); line-height: 1.3125; word-break: break-word; } body.is-ios .bubble { padding-bottom: .4375rem; } .msg.own .bubble { --bg: var(--color-bubble-out-b); background: linear-gradient(135deg, var(--color-bubble-out-a), var(--color-bubble-out-b)); max-width: min(30rem, calc(100vw - 3.75rem)); } :root[data-theme="dark"] .msg.own .bubble { color: #fff; --color-accent-own: #fff; --color-message-meta-own: rgba(255, 255, 255, .7); } :root[data-theme="dark"] .msg.own .bubble .quote { border-color: #fff; background: rgba(255, 255, 255, .16); } :root[data-theme="dark"] .msg.own .voice .play { background: #fff; color: var(--color-bubble-out); } :root[data-theme="dark"] .msg.own .voice .wave i { background: #fff; } body.is-ios .msg.own .bubble { padding-left: .625rem; } .msg:not(.own).first:not(.last) .bubble { border-bottom-left-radius: var(--border-radius-messages-small); } .msg:not(.own):not(.first):not(.last) .bubble { border-top-left-radius: var(--border-radius-messages-small); border-bottom-left-radius: var(--border-radius-messages-small); } .msg:not(.own).last:not(.first) .bubble { border-top-left-radius: var(--border-radius-messages-small); } .msg:not(.own).last .bubble { border-bottom-left-radius: 0; } .msg.own.first:not(.last) .bubble { border-bottom-right-radius: var(--border-radius-messages-small); } .msg.own:not(.first):not(.last) .bubble { border-top-right-radius: var(--border-radius-messages-small); border-bottom-right-radius: var(--border-radius-messages-small); } .msg.own.last:not(.first) .bubble { border-top-right-radius: var(--border-radius-messages-small); } .msg.own.last .bubble { border-bottom-right-radius: 0; } .bubble .name { font-size: calc(var(--message-text-size) - .125rem); font-weight: 500; line-height: 1.25rem; color: var(--color-primary); } .msg.own .bubble .name { color: var(--color-accent-own); } .bubble .text { white-space: pre-wrap; } .bubble .text::after { content: ""; display: inline-block; width: 3.5rem; height: 0; } /* room for the time at the end of the last line */ .msg.own .bubble .text::after { width: 4.75rem; } /* the ticks come with it */ .bubble .meta { position: absolute; right: .5rem; bottom: .25rem; display: flex; align-items: center; gap: .1875rem; height: 1rem; font-size: .75rem; line-height: 1; color: rgba(var(--color-text-meta-rgb), .75); white-space: nowrap; } .msg.own .bubble .meta { color: var(--color-message-meta-own); } .bubble .meta svg { width: 1.0625rem; height: 1.0625rem; stroke-width: 2.2; } .bubble .meta .ed { font-size: .6875rem; opacity: .85; margin-right: .125rem; } .bubble.edited .text::after { width: 5.75rem; } /* «ред.» takes room at the end of the last line too */ .msg.own .bubble.edited .text::after { width: 7rem; } /* «ред.» before the time of a reworded line */ .bubble, .bubble .text { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; } /* a hold opens the menu; copying is in it */ .bubble .meta .tick { display: inline-flex; align-items: center; } .appendix { position: absolute; bottom: 0; width: .5625rem; height: 1.0625rem; overflow: visible; display: none; pointer-events: none; } .msg.last .appendix { display: block; } .msg.own .appendix { right: -.5rem; } .msg:not(.own) .appendix { left: -.5rem; } .appendix .corner { fill: var(--bg); } .appendix .shadow { display: none; } /* swipe to reply, quotes, the reply bar, ticks */ .msg { transition: transform 150ms ease; touch-action: pan-y; } .msg.swiping { transition: none; } .msg .reply-hint { position: absolute; right: -2.375rem; top: 50%; transform: translateY(-50%); width: 1.875rem; height: 1.875rem; border-radius: 50%; background: rgba(0, 0, 0, .28); color: #fff; display: grid; place-items: center; opacity: 0; transition: opacity .15s ease; pointer-events: none; } .msg .reply-hint svg { width: 1.125rem; height: 1.125rem; } .quote { border-left: 2px solid var(--color-primary); padding: .125rem .375rem .1875rem; margin: .125rem 0 .3125rem; border-radius: .25rem; background: var(--color-primary-tint); font-size: calc(var(--message-text-size) - .0625rem); line-height: 1.25; cursor: pointer; max-width: 100%; } .quote .qt { color: var(--color-primary); font-weight: 500; font-size: .8125rem; } .quote .qx { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 15rem; } .msg.own .quote { border-color: var(--color-accent-own); background: rgba(0, 0, 0, .06); } .msg.own .quote .qt { color: var(--color-accent-own); } .reply-bar { display: flex; align-items: center; gap: .5rem; margin: 0 0 .375rem; padding: .375rem .375rem .375rem .75rem; border-radius: .875rem; background: var(--color-background); box-shadow: var(--shadow-footer); animation: pop-in .2s ease; } .reply-bar .rb { flex: 1; min-width: 0; border-left: 2px solid var(--color-primary); padding-left: .5rem; } .reply-bar .rt { color: var(--color-primary); font-size: .8125rem; font-weight: 500; line-height: 1.2; } .reply-bar .rx { font-size: .9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; } .reply-bar.attach .athumb { width: 2.75rem; height: 2.75rem; border-radius: .5rem; object-fit: cover; flex: none; } .reply-bar.edit .eico { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; color: var(--color-primary); flex: none; } .reply-bar.edit .eico svg { width: 1.125rem; height: 1.125rem; } .msg.pending .bubble { opacity: .75; } .reply-bar .x { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; color: var(--color-text-secondary); flex: none; } .reply-bar .x svg { width: 1.125rem; height: 1.125rem; } .msg.flash .bubble { animation: flash .9s ease; } @keyframes flash { 0%, 100% { box-shadow: 0 1px 2px var(--color-default-shadow); } 30% { box-shadow: 0 0 0 .25rem var(--color-primary-tint), 0 1px 2px var(--color-default-shadow); } } .row-item .ticks { width: 1rem; height: 1rem; color: var(--color-primary); flex: none; } /* a picture in a bubble */ .bubble.has-media, body.is-ios .bubble.has-media, body.is-ios .msg.own .bubble.has-media { padding: 0; width: min(18rem, calc(100vw - 4.5rem)); overflow: hidden; } /* beats the iOS padding rules: no frame around the picture */ /* the bubble is exactly the picture's width: nothing sticks out, the corners stay round */ .bubble.has-media .name { padding: .3125rem .5rem 0; } .bubble.has-media .pic { position: relative; width: 100%; min-height: 6rem; background: var(--color-background-secondary-accent); overflow: hidden; } .bubble.has-media .pic.loading { aspect-ratio: 4 / 3; } .bubble.has-media .pic.loading::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); background-size: 200% 100%; animation: pic-shimmer 1.2s ease-in-out infinite; } :root[data-theme="dark"] .bubble.has-media .pic.loading::before { background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .08) 50%, transparent 70%); background-size: 200% 100%; } @keyframes pic-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } } .bubble.has-media .pic.loading .media { opacity: 0; position: absolute; inset: 0; height: 100%; } .bubble.has-media .pic.failed::after { content: "фото не завантажилось"; position: absolute; inset: 0; display: grid; place-items: center; font-size: .8125rem; color: var(--color-text-secondary); } .bubble.has-media .media { display: block; width: 100%; max-height: min(24rem, 55vh); object-fit: cover; cursor: zoom-in; opacity: 1; transition: opacity .25s ease; } /* a tall photo is cropped to about half the screen, the viewer shows it whole */ .bubble.has-media .text { padding: .3125rem .5rem .375rem; } .bubble.has-media .meta { right: .5rem; bottom: .25rem; background: rgba(0, 0, 0, .35); color: #fff !important; padding: 0 .375rem; border-radius: .5rem; height: 1.125rem; } .bubble.has-media .text ~ .meta { background: none; padding: 0; height: 1rem; color: rgba(var(--color-text-meta-rgb), .75) !important; } /* a caption: the time sits at the end of its last line, like a plain bubble */ .msg.own .bubble.has-media .text ~ .meta { color: var(--color-message-meta-own) !important; } .bubble.has-media .quote { margin: .375rem .5rem 0; } /* typing dots */ .typing-dots { display: inline-flex; gap: .25rem; align-items: center; height: 1.25rem; padding: 0 .25rem; } .typing-dots i { width: .4375rem; height: .4375rem; border-radius: 50%; background: var(--color-text-secondary); animation: dots 1.2s infinite ease-in-out; } .typing-dots i:nth-child(2) { animation-delay: .2s; } .typing-dots i:nth-child(3) { animation-delay: .4s; } @keyframes dots { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-.25rem); opacity: 1; } } /* voice bubble */ .voice { display: flex; align-items: center; gap: .625rem; min-width: 14rem; padding: .25rem 0 .375rem; } .voice .play { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--color-primary); color: #fff; display: grid; place-items: center; flex: none; } .msg.own .voice .play { background: var(--color-accent-own); } :root[data-theme="dark"] .msg.own .voice .play { background: #fff; color: var(--color-background-own); } .voice .play svg { width: 1.25rem; height: 1.25rem; } .voice .wave { display: flex; align-items: center; gap: 2px; height: 1.5rem; flex: 1; cursor: pointer; } .voice .wave i { flex: 1; min-width: 2px; max-width: 3px; border-radius: 1.5px; background: var(--color-primary); opacity: .3; transition: opacity .1s linear; } .voice .wave i.played { opacity: 1; } .msg.own .voice .wave i { background: var(--color-accent-own); } .voice .dur { font-size: .75rem; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; margin-top: .125rem; } .msg.own .voice .dur { color: var(--color-message-meta-own); } .voice .info { flex: 1; min-width: 0; } /* video circle bubble */ .msg .circle-wrap { width: 15rem; height: 15rem; max-width: 70vw; max-height: 70vw; border-radius: 50%; overflow: hidden; position: relative; background: #000; box-shadow: 0 1px 2px var(--color-default-shadow); } .msg .circle-wrap video { width: 100%; height: 100%; object-fit: cover; } .msg .circle-wrap .cplay { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(0, 0, 0, .25); } .msg .circle-wrap .cplay svg { width: 3rem; height: 3rem; filter: drop-shadow(0 1px 3px rgba(0,0,0,.4)); } .msg .circle-wrap .cdur { position: absolute; left: .625rem; bottom: .625rem; padding: .125rem .5rem; border-radius: .75rem; background: rgba(0, 0, 0, .35); color: #fff; font-size: .75rem; } .msg .circle-wrap .cring { position: absolute; inset: 0; pointer-events: none; } .msg .circle-wrap .cring circle { fill: none; stroke: rgba(255,255,255,.85); stroke-width: 3; stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset .2s linear; } .msg.circle { margin-bottom: .5rem; } .msg.circle .meta-out { font-size: .75rem; color: #fff; background: var(--action-message-bg); padding: .125rem .375rem; border-radius: .5rem; margin: 0 .375rem .25rem; align-self: flex-end; } /* the composer */ .composer-wrap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 11; padding: 0 .5rem calc(.5rem + var(--safe-bottom)); transition: transform var(--layer-transition), padding-bottom 260ms cubic-bezier(.32, .72, 0, 1); } body.keyboard-visible .composer-wrap { padding-bottom: .5rem; } :root { --composer-main: 3.25rem; } .composer { display: flex; align-items: flex-end; gap: .5rem; } .composer .field { flex: 1; min-width: 0; display: flex; align-items: flex-end; background: var(--color-bubble-in); border-radius: 1.625rem; box-shadow: var(--shadow-footer); position: relative; padding: 0 .75rem 0 .25rem; } .composer .field .abtn { width: 3.25rem; min-height: var(--composer-main); align-self: stretch; display: grid; place-items: center; color: var(--color-text-secondary); flex: none; order: -1; margin-left: -.25rem; padding: 0; touch-action: manipulation; } .composer .field .abtn svg { width: 1.5rem; height: 1.5rem; stroke-width: 1.8; } :root[data-theme="dark"] .composer .field { box-shadow: none; } :root[data-theme="dark"] .composer .main { box-shadow: none; } .composer textarea::placeholder { color: #8E8E93; } .composer .field .abtn[hidden] + textarea, .composer textarea:first-child { padding-left: .875rem; } .composer textarea { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: calc((var(--composer-main) - var(--composer-text-size) * 1.3125) / 2) .5rem calc((var(--composer-main) - var(--composer-text-size) * 1.3125) / 2) .25rem; font-size: var(--composer-text-size); line-height: 1.3125; max-height: 10rem; overflow: hidden; caret-color: var(--color-text); transition: height 100ms ease; } .composer textarea.overflown { overflow-y: auto; } .composer textarea::placeholder { color: var(--color-placeholders); } .composer .main { width: var(--composer-main); height: var(--composer-main); border-radius: 50%; background: var(--color-primary); color: #fff; display: grid; place-items: center; flex: none; box-shadow: var(--shadow-footer); position: relative; overflow: hidden; } .composer .main svg { width: 1.625rem; height: 1.625rem; position: absolute; } .composer .main .i-send { transform: translateX(-1px); } .composer .main .i-send { animation: hide-icon .4s forwards ease-out; } .composer .main .i-mic { animation: grow-icon .4s ease-out; } .composer .main.send .i-send { animation: grow-icon .4s ease-out; } .composer .main.send .i-mic { animation: hide-icon .4s forwards ease-out; } .composer .main.send .i-cam { display: none; } .composer .main.cam .i-mic { display: none; } .composer .main.cam .i-cam { animation: grow-icon .4s ease-out; } .composer .main:not(.cam) .i-cam { display: none; } .composer .main.send .i-mic { display: none; } @keyframes grow-icon { 0% { transform: scale(.5); opacity: .8; } 50% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); } } @keyframes hide-icon { from { transform: scale(1); opacity: .4; } to { transform: scale(.5); opacity: 0; } } .composer .main:active { transform: scale(.94); } .random-bar { flex: none; display: flex; gap: .375rem; padding: .375rem .5rem .4375rem; background: var(--color-header); box-shadow: 0 .5px 0 var(--color-borders); position: relative; z-index: 10; } /* three tiles: icon over a small label (2026-10-02) — leave, three hours apart, the next one */ .random-bar .rb-btn { flex: 1 1 0; min-width: 0; height: 2.875rem; padding: 0 .25rem; border-radius: .875rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1875rem; font-size: .6875rem; font-weight: 600; line-height: 1; white-space: nowrap; position: relative; overflow: hidden; transition: transform .1s ease, opacity .2s ease; } .random-bar .rb-btn svg { width: 1.25rem; height: 1.25rem; flex: none; } .random-bar .rb-btn:active { transform: scale(.97); } .random-bar .rb-btn.end { background: #e5393518; color: var(--color-error); } .random-bar .rb-btn.mute { background: #ff95001f; color: #f08c00; } .random-bar .rb-btn.next { flex-grow: 1.35; background: var(--color-primary); color: #fff; } .random-bar.holding .rb-btn { display: none; } /* the first minute: one capsule that drains instead of three dead buttons */ .random-bar .rb-hold { flex: 1; min-width: 0; height: 2.25rem; border-radius: 1.125rem; display: flex; align-items: center; justify-content: center; gap: .375rem; background: var(--color-primary-tint); color: var(--color-primary); font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; position: relative; overflow: hidden; } .random-bar .rb-hold[hidden] { display: none; } .random-bar .rb-hold i { position: absolute; left: 0; top: 0; bottom: 0; background: currentColor; opacity: .14; transition: width 1s linear; } .random-bar .rb-hold svg { width: 1rem; height: 1rem; flex: none; position: relative; } .random-bar .rb-hold span { position: relative; overflow: hidden; text-overflow: ellipsis; } .closed-note { padding: .625rem 1rem; text-align: center; font-size: .9375rem; color: var(--color-text-secondary); background: color-mix(in srgb, var(--color-background) 92%, transparent); border-radius: var(--border-radius-messages); box-shadow: var(--shadow-footer); } /* voice recording bar */ .recbar { position: absolute; inset: 0; z-index: 3; display: flex; gap: .25rem; align-items: center; border-radius: 1.625rem; background: var(--color-background); } .recbar .side { width: 2.75rem; height: var(--composer-main); display: grid; place-items: center; color: var(--color-text-secondary); flex: none; } .recbar .side.del { color: var(--color-error); } .recbar .side svg { width: 1.5rem; height: 1.5rem; } .recbar .rpill { flex: 1; display: flex; gap: .625rem; align-items: center; height: 2.5rem; margin-right: .375rem; padding: 0 .75rem 0 .5rem; border-radius: var(--composer-control-radius); background: color-mix(in srgb, var(--color-primary) 10%, transparent); min-width: 0; } .recbar .dot { width: .75rem; height: .75rem; border-radius: 50%; background: var(--color-error); animation: grow-control .2s ease-out, rec-pulse 1s infinite alternate ease-in-out; flex: none; } @keyframes rec-pulse { from { opacity: 1; } to { opacity: .4; } } @keyframes grow-control { from { transform: scale(.5); opacity: .8; } 50% { transform: scale(1.1); opacity: 1; } to { transform: scale(1); } } .recbar .rwave { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; gap: 3px; overflow: hidden; justify-content: flex-end; } .recbar .rwave i { width: 3px; border-radius: 1.5px; background: var(--color-primary); flex: none; min-height: 3px; } .recbar .timer { font-size: .875rem; font-variant-numeric: tabular-nums; line-height: 1.375rem; color: var(--color-text); flex: none; } /* video circle recorder */ .circ-rec { position: fixed; inset: 0; z-index: 1200; background: rgba(0, 0, 0, .85); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; padding: 1rem; } .circ-rec .ring { width: min(80vw, 22rem); height: min(80vw, 22rem); border-radius: 50%; overflow: hidden; position: relative; background: #000; box-shadow: 0 0 0 4px rgba(255, 255, 255, .25); } .circ-rec video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); } .circ-rec video.back { transform: none; } .circ-rec .timer { color: #fff; font-size: 1.25rem; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: .5rem; } .circ-rec .timer .dot { width: .75rem; height: .75rem; border-radius: 50%; background: var(--color-error); animation: rec-pulse 1s infinite alternate; } .circ-rec .ctrls { display: flex; gap: 2rem; align-items: center; } .circ-rec .cbtn { width: 3.5rem; height: 3.5rem; border-radius: 50%; background: rgba(255, 255, 255, .15); color: #fff; display: grid; place-items: center; } .circ-rec .cbtn.big { width: 4.5rem; height: 4.5rem; background: var(--color-error); } .circ-rec .cbtn.send { background: var(--color-primary); } .circ-rec .cbtn svg { width: 1.75rem; height: 1.75rem; } .circ-rec .arc { position: absolute; inset: 0; pointer-events: none; } .circ-rec .arc circle { fill: none; stroke: #fff; stroke-width: 4; transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset .5s linear; } /* scroll-down FAB */ .scroll-down { position: absolute; right: .5rem; bottom: calc(var(--composer-reserve) + .5rem); z-index: 12; width: 2.875rem; height: 2.875rem; border-radius: 50%; background: var(--color-background); color: var(--color-composer-button); box-shadow: 0 1px 2px var(--color-default-shadow); display: grid; place-items: center; transform: translateY(4.5rem); opacity: 0; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), opacity .2s ease; } .scroll-down:not(.revealed) { pointer-events: none; visibility: hidden; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), opacity .2s ease, visibility 0s linear .25s; } .scroll-down.revealed { transform: none; opacity: 1; } .scroll-down svg { width: 1.75rem; height: 1.75rem; } .scroll-down i { position: absolute; top: -.6875rem; min-width: 1.5rem; height: 1.5rem; padding: 0 .4375rem; border: 1px solid var(--color-background); border-radius: .75rem; background: var(--color-active); color: #fff; font-size: .875rem; font-weight: 500; font-style: normal; line-height: 1.5rem; } /* ---- floating search bar --------------------------------------------------- */ .search-float { position: absolute; left: .75rem; right: .75rem; bottom: calc(var(--tabbar-space) + .5rem); z-index: 6; display: flex; align-items: center; gap: .625rem; padding: .5rem .625rem .5rem .875rem; border-radius: 1rem; background: var(--color-background); box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .18); font-size: .875rem; animation: pop-in .3s cubic-bezier(.34, 1.56, .64, 1); } .search-float .grow { flex: 1; min-width: 0; } .search-float b { display: block; } @keyframes pop-in { from { transform: translateY(1rem); opacity: 0; } to { transform: none; opacity: 1; } } /* ---- random search screen ---------------------------------------------------- */ .hero { text-align: center; padding: 2rem 1.5rem 1rem; } .hero .mark { font-size: 4rem; line-height: 1; margin-bottom: .75rem; } .hero h1 { margin: 0 0 .5rem; font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; } .hero .lead { font-size: .9375rem; } .hero img.mark { width: 5rem; height: 5rem; border-radius: 50%; margin: 0 auto .75rem; } .wait-box { display: flex; align-items: center; gap: .875rem; } .wait-box .clock { font-size: 1.5rem; font-variant-numeric: tabular-nums; font-weight: 600; } /* ---- the living hero: Telegram's animated wallpaper behind the emoji ------ */ .hero.anim { position: relative; overflow: hidden; margin: .5rem .75rem .75rem; padding: 2.75rem 1.25rem 1.5rem; border-radius: 1.5rem; color: #fff; isolation: isolate; box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .18); background: var(--hero-base); } /* the colour is there from the first frame: no black while the layers warm up */ .hero.anim h1, .hero.anim .lead { color: #fff; position: relative; z-index: 2; } .hero.anim .lead { opacity: .9; } /* One painted layer of soft colour spots, drifting as a whole on the GPU. The four blurred, separately animated blobs it replaces (2026-09-24) took the first second to composite and showed as a black shiver. */ .hero.anim .blobs { position: absolute; inset: -30%; z-index: 0; background: radial-gradient(circle at 18% 22%, var(--hero-a) 0, transparent 38%), radial-gradient(circle at 82% 18%, var(--hero-b) 0, transparent 36%), radial-gradient(circle at 28% 88%, var(--hero-c) 0, transparent 40%), radial-gradient(circle at 86% 84%, var(--hero-d) 0, transparent 36%), var(--hero-base); will-change: transform; animation: blobs-drift 16s ease-in-out infinite alternate; } .hero.anim .blob { display: none; } @keyframes blobs-drift { 0% { transform: translate(0, 0) rotate(0deg) scale(1); } 100% { transform: translate(4%, -3%) rotate(6deg) scale(1.08); } } .hero.anim .blob:nth-child(1) { left: -20%; top: -30%; background: var(--hero-a); animation-duration: 13s; } .hero.anim .blob:nth-child(2) { right: -25%; top: -10%; background: var(--hero-b); animation-duration: 17s; animation-delay: -4s; } .hero.anim .blob:nth-child(3) { left: 10%; bottom: -45%; background: var(--hero-c); animation-duration: 15s; animation-delay: -8s; } .hero.anim .blob:nth-child(4) { right: 5%; bottom: -30%; width: 55%; background: var(--hero-d); animation-duration: 19s; animation-delay: -12s; } @keyframes blob { 0% { transform: translate(0, 0) scale(1); } 33% { transform: translate(18%, 12%) scale(1.15); } 66% { transform: translate(-12%, 20%) scale(.9); } 100% { transform: translate(8%, -14%) scale(1.1); } } .hero.anim .mark { position: relative; z-index: 2; width: 5.5rem; height: 5.5rem; margin: 0 auto .875rem; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .22); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55), 0 .75rem 1.5rem rgba(0, 0, 0, .25); animation: float 3.2s ease-in-out infinite; } .hero.anim .mark svg { width: 2.75rem; height: 2.75rem; color: #fff; stroke-width: 1.8; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .25)); } @keyframes float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-.5rem) rotate(3deg); } } .hero.anim .halo { position: absolute; left: 50%; top: 5.25rem; width: 9rem; height: 9rem; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 70%); animation: halo 3.2s ease-in-out infinite; z-index: 1; } @keyframes halo { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .8; } 50% { transform: translate(-50%, -50%) scale(1.25); opacity: 1; } } .hero.anim .bits { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; } .hero.anim .bit { position: absolute; bottom: -1.5rem; opacity: 0; animation: bit 7s linear infinite; will-change: transform, opacity; color: #fff; } .hero.anim .bit svg { width: var(--sz, 1rem); height: var(--sz, 1rem); stroke-width: 1.8; opacity: .8; } @keyframes bit { 0% { transform: translateY(0) scale(.6) rotate(0); opacity: 0; } 10% { opacity: .9; } 90% { opacity: .5; } 100% { transform: translateY(-14rem) scale(1.1) rotate(25deg); opacity: 0; } } .hero.flirt-bg { --hero-base: #c2337a; --hero-a: #ff5c7a; --hero-b: #7b4dff; --hero-c: #ff9a5c; --hero-d: #ff2d95; } .hero.calm-bg { --hero-base: #2a9d8f; --hero-a: #48cae4; --hero-b: #90e0ef; --hero-c: #52b788; --hero-d: #ffd166; } .hero.limit-bg { --hero-base: #d1495b; --hero-a: #ff7b54; --hero-b: #ffb26b; --hero-c: #ff5c7a; --hero-d: #7b4dff; } .hero.wait-bg { --hero-base: #c77d1a; --hero-a: #ffb703; --hero-b: #fb8500; --hero-c: #ffd166; --hero-d: #ef476f; } .hero.pause-bg { --hero-base: #4a4e69; --hero-a: #6c757d; --hero-b: #8d99ae; --hero-c: #5c677d; --hero-d: #9a8c98; } .hero.anim .btn { position: relative; z-index: 2; margin-top: 1rem; background: #fff; color: #1c1c1e; } .hero.anim .btn.plain { background: transparent; color: #fff; margin-top: .25rem; } .hero.anon-bg { --hero-base: #2d5fd4; --hero-a: #3390ec; --hero-b: #00c6ff; --hero-c: #7b4dff; --hero-d: #34c759; } @media (prefers-reduced-motion: reduce) { .hero.anim .blob, .hero.anim .mark, .hero.anim .halo, .hero.anim .bit { animation: none !important; } } /* ---- flirt ---------------------------------------------------------------------- */ .deck { position: relative; height: calc(100% - 6.5rem); margin: .5rem .75rem 0; } .fcard { position: absolute; inset: 0; border-radius: 1.25rem; overflow: hidden; background: var(--color-background); box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .18); touch-action: none; will-change: transform; transition: transform .38s cubic-bezier(.22, .61, .36, 1), opacity .38s ease; } .fcard.dragging { transition: none; } .fcard.fly-left { transform: translate(-140%, -12%) rotate(-28deg) !important; opacity: 0; transition: transform .42s cubic-bezier(.3, .7, .4, 1), opacity .3s ease .12s; } .fcard.fly-right { transform: translate(140%, -12%) rotate(28deg) !important; opacity: 0; transition: transform .42s cubic-bezier(.3, .7, .4, 1), opacity .3s ease .12s; } .fcard.under { transform: scale(.94) translateY(1.25rem); opacity: .85; pointer-events: none; } .fcard.under .stamp { opacity: 0 !important; } .fcard .fphoto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #ddd; } .fcard .fdots { position: absolute; top: .5rem; left: .75rem; right: .75rem; display: flex; gap: .25rem; z-index: 2; } .fcard .fdots i { flex: 1; height: .1875rem; border-radius: .09375rem; background: rgba(255, 255, 255, .45); } .fcard .fdots i.on { background: #fff; } .fcard .fshade { position: absolute; left: 0; right: 0; bottom: 0; padding: 4rem 1rem 1.125rem; background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0)); color: #fff; } .fcard .fname { font-size: 1.625rem; font-weight: 700; line-height: 1.15; display: flex; align-items: baseline; gap: .5rem; } .fcard .fname span { font-weight: 400; font-size: 1.25rem; opacity: .9; } .fcard .ftag { font-size: .875rem; opacity: .9; margin-top: .125rem; } .fcard .fbio { font-size: .9375rem; margin-top: .375rem; line-height: 1.35; max-height: 5.5rem; overflow: hidden; white-space: pre-wrap; position: relative; } .fbio .more { color: var(--color-primary, #3390ec); font-weight: 600; white-space: nowrap; } .fbio.open { max-height: 45vh; overflow: auto; } .fcard .fliked { position: absolute; top: 1.25rem; left: .75rem; padding: .25rem .625rem; border-radius: 1rem; background: rgba(255, 92, 122, .9); color: #fff; font-size: .8125rem; font-weight: 600; z-index: 2; } .fcard .stamp { position: absolute; top: 2.5rem; padding: .25rem .75rem; border: 3px solid; border-radius: .5rem; font-size: 1.75rem; font-weight: 800; letter-spacing: .05em; opacity: 0; transform: rotate(-15deg); z-index: 3; } .fcard .stamp.like { left: 1.25rem; color: #4cd964; border-color: #4cd964; } .fcard .stamp.nope { right: 1.25rem; color: #ff3b30; border-color: #ff3b30; transform: rotate(15deg); } .fcard .tapzone { position: absolute; top: 0; bottom: 8rem; width: 50%; z-index: 1; } .fcard .tapzone.r { right: 0; } .deck-body { display: flex; flex-direction: column; } .deck .empty-hero { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; justify-content: center; } .fcard.skeleton-card { background: linear-gradient(90deg, var(--color-background) 25%, var(--color-background-secondary-accent) 50%, var(--color-background) 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; box-shadow: none; } .deck-body .deck { flex: 1; min-height: 0; height: auto; margin: .5rem .75rem 0; } .factions { display: flex; justify-content: center; align-items: flex-start; gap: 1.5rem; padding: .75rem 0 calc(.5rem + var(--safe-bottom)); } .factions button { display: flex; flex-direction: column; align-items: center; gap: .375rem; color: var(--color-text-secondary); font-size: .75rem; font-weight: 500; -webkit-tap-highlight-color: transparent; } .factions button::before { content: ""; } .factions button svg { width: 2rem; height: 2rem; stroke-width: 2.5; } .factions .nope svg, .factions .like svg { display: grid; place-items: center; padding: 1.125rem; box-sizing: content-box; border-radius: 50%; transition: transform .15s cubic-bezier(.34, 1.56, .64, 1), box-shadow .15s ease; } .factions button:active svg { transform: scale(.86); } .factions .nope svg { color: #fff; background: linear-gradient(145deg, #6e8efb, #4f6df5 60%, #3b5bdb); box-shadow: 0 .5rem 1.25rem rgba(79, 109, 245, .45); } .factions .like svg { color: #fff; background: linear-gradient(145deg, #ff6b8b, #ff2d55 55%, #e0245e); box-shadow: 0 .5rem 1.25rem rgba(255, 45, 85, .5); } .factions .like svg { width: 2.25rem; height: 2.25rem; padding: 1.25rem; } .factions .like { margin-top: -.25rem; } .photo-grid { display: flex; gap: .5rem; padding: 0 .75rem .625rem; } .photo-slot { flex: 1; aspect-ratio: 3 / 4; border-radius: .75rem; background: var(--color-background); border: 1.5px dashed var(--color-borders); display: grid; place-items: center; color: var(--color-text-secondary); position: relative; overflow: hidden; } .photo-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* absolute: a percentage height inside an aspect-ratio box is not definite in WebKit */ .photo-slot .x { position: absolute; top: .25rem; right: .25rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; display: grid; place-items: center; } .photo-slot .x svg { width: .875rem; height: .875rem; } .photo-slot input { position: absolute; inset: 0; opacity: 0; } .photo-slot svg.plus { width: 1.75rem; height: 1.75rem; } .photo-slot .spinner { position: absolute; } .match-splash { position: fixed; inset: 0; z-index: 1300; background: linear-gradient(160deg, #ff5c7a, #7b4dff); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 2rem; text-align: center; animation: fade-in .3s ease; } .match-splash h2 { font-size: 2.25rem; margin: 0; font-weight: 800; letter-spacing: -.02em; animation: pop-in .5s cubic-bezier(.34, 1.56, .64, 1); } .match-splash .pair { display: flex; gap: -1rem; } .match-splash .pair .avatar { width: 6rem; height: 6rem; border: 3px solid #fff; box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .3); } .match-splash .pair .avatar + .avatar { margin-left: -1rem; } .match-splash .btn { max-width: 18rem; background: #fff; color: #7b4dff; } .match-splash .btn.plain { background: transparent; color: #fff; } .profile-view { position: relative; } .profile-view .pphotos { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0; } .profile-view .pphotos img { width: 100%; flex: none; scroll-snap-align: start; aspect-ratio: 3 / 4; object-fit: cover; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } /* ---- admin cards ------------------------------------------------------------------ */ .acard { background: var(--color-background); margin: 0 .75rem .5rem; border-radius: var(--border-radius-default-small); padding: .625rem .75rem; } .acard .head { display: flex; justify-content: space-between; gap: .5rem; font-size: .8125rem; font-weight: 500; color: var(--color-primary); } .acard .head time, .acard .meta { font-size: .75rem; color: var(--color-text-secondary); font-weight: 400; } .adm-ask.off { opacity: .55; } .adm-ask .hint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .acard .meta { margin-top: .25rem; display: flex; align-items: center; gap: .3125rem; } /* the author's earlier posts under a moderation card, folded */ .acard .prev, .card .prev { margin-top: .375rem; font-size: .8125rem; color: var(--color-text-secondary); } .acard .prev summary, .card .prev summary { cursor: pointer; list-style: none; } .acard .prev summary::before, .card .prev summary::before { content: "▸ "; } .acard .prev[open] summary::before, .card .prev[open] summary::before { content: "▾ "; } .acard .prev-line, .card .prev-line { margin: .25rem 0 0 .875rem; line-height: 1.35; } .acard .prev-line b { font-weight: 600; } .acard .prev-line i { font-style: normal; color: var(--color-text); } .acard .meta svg { width: .875rem; height: .875rem; flex: none; } /* compact: five of them have to fit on one phone-width card */ .acard .actions .pill { padding: .25rem .5625rem; border-radius: 1rem; font-weight: 600; font-size: .75rem; gap: .25rem; white-space: nowrap; } .acard .actions .pill svg { width: .875rem; height: .875rem; } .acard .meta.tap { cursor: pointer; border-radius: .375rem; } .acard .meta.tap:active { background: var(--color-chat-hover); } .acard .meta .chev { margin-left: auto; width: .875rem; height: .875rem; color: var(--color-gray); } .pill svg { width: 1rem; height: 1rem; flex: none; } .empty .mark svg { width: 3rem; height: 3rem; color: var(--color-text-secondary); opacity: .6; } .acard .text { margin-top: .5rem; white-space: pre-wrap; word-break: break-word; line-height: 1.35; border-radius: .375rem; } /* text that just changed: a wash of the accent that fades; a card that was decided: slides away */ .acard .text.flash { animation: text-flash 1.4s ease-out; } .acard .text.folded { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .acard .unfold { display: inline-flex; align-items: center; gap: .125rem; margin-top: .375rem; padding: .25rem .5rem .25rem .625rem; border-radius: .875rem; background: var(--color-primary-tint); color: var(--color-primary); font-size: .8125rem; font-weight: 600; position: relative; overflow: hidden; } .acard .unfold svg { width: .875rem; height: .875rem; transform: rotate(90deg); transition: transform .2s ease; } .acard .unfold.open svg { transform: rotate(-90deg); } @keyframes text-flash { 0% { background: color-mix(in srgb, var(--color-primary) 22%, transparent); box-shadow: 0 0 0 .375rem color-mix(in srgb, var(--color-primary) 22%, transparent); } 100% { background: transparent; box-shadow: 0 0 0 .375rem transparent; } } .acard.gone { animation: card-gone .3s ease-in forwards; pointer-events: none; } @keyframes card-gone { to { opacity: 0; transform: translateX(2rem); } } .acard .due { margin-top: .5rem; color: var(--color-primary); font-size: .875rem; font-weight: 600; } .acard .actions { display: flex; flex-wrap: wrap; gap: .3125rem; margin-top: .5rem; } .acard .ph { display: block; margin-top: .5rem; border-radius: .625rem; width: 5rem; height: 5rem; object-fit: cover; } /* a thumbnail: the whole picture is a tap away, the list stays a list */ .acard .outlook { margin-top: .375rem; color: var(--color-primary); font-weight: 500; } .acard .lines { margin-top: .5rem; border-left: 2px solid var(--color-borders); padding-left: .625rem; font-size: .9375rem; } .acard .lines .accused { color: var(--color-error); } .acard .status { font-size: .8125rem; font-weight: 500; } /* a post sent «без черги»: a gold edge and a star in the head */ .acard.paid { box-shadow: inset 0 0 0 1px #f5a62366, 0 0 0 .5px #f5a62322; background: linear-gradient(135deg, #f5a6230f, transparent 55%), var(--color-background); } .acard .paidmark { display: inline-flex; align-items: center; gap: .1875rem; margin-left: .375rem; padding: 0 .4375rem 0 .3125rem; height: 1.125rem; border-radius: .5625rem; background: linear-gradient(135deg, #ffb340, #f28b00); color: #fff; font-size: .6875rem; font-weight: 700; vertical-align: .0625rem; } .acard .paidmark svg { width: .75rem; height: .75rem; } /* «Відправити зараз» on a post still with the moderator: a gold pill among the actions, a grey line under them */ .acard .pill.gold { background: linear-gradient(135deg, #ffb340, #f28b00); color: #fff; box-shadow: 0 .25rem .75rem rgba(245, 166, 35, .35); } .acard .pill.gold svg { width: .9375rem; height: .9375rem; } .acard .pill.gold:disabled { opacity: .55; box-shadow: none; } .acard .meta.hint { margin-top: .375rem; font-size: .75rem; line-height: 1.35; } .acard .status.pending { color: var(--color-warning); } .acard .status.published { color: var(--color-green); } .acard .status.rejected, .acard .status.deleted { color: var(--color-error); } .acard .status.withdrawn { color: var(--color-text-secondary); } .stats { display: flex; flex-wrap: wrap; row-gap: .5rem; text-align: center; padding: .625rem .25rem; } /* the moderator's numbers: a card of tile rows; the folding groups sit under a thin line each */ .statbox { padding: 0; overflow: hidden; } .stat-note { white-space: pre-line; font-size: .6875rem; line-height: 1.35; color: var(--color-text-secondary); text-align: center; padding: 0 .875rem .5rem; } .stat-note:empty { display: none; } .stat-head { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .5rem .875rem; border: 0; border-top: 1px solid var(--color-borders); background: none; color: var(--color-text-secondary); font: inherit; font-size: .8125rem; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; text-align: left; } .stat-head .chev { margin-left: auto; width: 1rem; height: 1rem; color: var(--color-gray); transition: transform .2s ease; } .stat-head.open .chev { transform: rotate(90deg); } .stat-panel { display: none; } .stat-panel.open { display: flex; } .stats > div { flex: 1 1 25%; min-width: 25%; } .stats b { display: block; font-size: 1.125rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.2; white-space: nowrap; } .stats > div > span { display: block; font-size: .625rem; line-height: 1.2; color: var(--color-text-secondary); padding: 0 .125rem; } /* the labels only: the odometer inside is made of spans too */ /* the «online now» pill in the moderation header: a breathing green dot and the odometer count */ .live { display: inline-flex; align-items: center; gap: .375rem; height: 1.875rem; padding: 0 .75rem 0 .625rem; border-radius: 1rem; background: rgba(52, 199, 89, .14); color: #34c759; font-size: .8125rem; font-weight: 600; white-space: nowrap; } .live .dot { position: relative; width: .5rem; height: .5rem; border-radius: 50%; background: #34c759; flex: none; } .live .dot::after { content: ""; position: absolute; inset: -.25rem; border-radius: 50%; border: .125rem solid #34c759; opacity: 0; animation: live-pulse 1.8s ease-out infinite; } @keyframes live-pulse { 0% { transform: scale(.5); opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } } .live b { font-size: .9375rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; } .live b.odo { display: inline-flex; height: 1em; } .live b .odo-col { display: block; width: auto; min-width: .6em; height: 1em; line-height: 1; overflow: hidden; text-align: center; } .live b .odo-strip { display: block; margin: 0; padding: 0; background: none; transition: transform .6s cubic-bezier(.22, 1, .36, 1); } .live b .odo-d { display: block; height: 1em; line-height: 1; } /* the odometer: digit columns one character wide, each a strip of 0–9 that slides to the digit shown */ .stats b.odo { display: flex; justify-content: center; align-items: center; height: 1.2em; line-height: 1; } /* the class names are prefixed on purpose: a bare .strip is the app's orange warning bar */ .stats b .odo-col { display: block; width: auto; min-width: .6em; height: 1em; line-height: 1; overflow: hidden; text-align: center; } .stats b .odo-strip { display: block; margin: 0; padding: 0; background: none; transition: transform .6s cubic-bezier(.22, 1, .36, 1); } /* no will-change (2026-09-27): a layer per digit weighed on the iPhone's scroll */ .stats b .odo-d { display: block; height: 1em; line-height: 1; } /* and a short flash of the accent on the whole number, or a badge, that just changed */ .stats b.bump { animation: stat-flash .9s ease-out; } .ftabs i.bump { animation: stat-bump .6s cubic-bezier(.34, 1.56, .64, 1); } @keyframes stat-flash { 0%, 40% { color: var(--color-primary); } 100% { color: inherit; } } @keyframes stat-bump { 0% { transform: scale(1.3); } 100% { transform: scale(1); } } .rows.acts .row-item.act { min-height: 3rem; } .rows.acts .row-item.act .avatar { width: 2.125rem; height: 2.125rem; font-size: .875rem; } .fq-photos { display: flex; gap: .375rem; margin-top: .5rem; } .fq-photos img { width: 6rem; aspect-ratio: 3 / 4; object-fit: cover; border-radius: .5rem; } /* ---- modal, sheet, toast, viewer ---------------------------------------- */ #app > .modal-root { position: absolute; } .modal-root { position: fixed; inset: 0; z-index: 1510; display: flex; align-items: center; justify-content: center; } .modal-root .backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .25); opacity: 0; transition: opacity .2s ease; } .modal-root.open .backdrop { opacity: 1; } .modal-dialog { position: relative; width: calc(100vw - 3rem); max-width: 24rem; border-radius: var(--border-radius-modal); background: var(--color-background); box-shadow: 0 .25rem .5rem .125rem var(--color-default-shadow); padding: 1.3125rem 1.375rem 1rem; transform: translate3d(0, -1rem, 0); opacity: 0; transition: transform .2s ease, opacity .2s ease; } .modal-root.open .modal-dialog { transform: none; opacity: 1; } .modal-root.closing .modal-dialog { transform: translate3d(0, 1rem, 0); opacity: 0; } .modal-dialog .mtitle { font-size: 1.25rem; font-weight: 500; margin-bottom: .5rem; } .modal-dialog .mtext { white-space: pre-line; font-size: .9375rem; line-height: 1.4; color: var(--color-text); white-space: pre-wrap; } .modal-dialog input { width: 100%; margin-top: .75rem; padding: .625rem .75rem; border: 1px solid var(--color-borders); border-radius: .625rem; background: var(--color-background); outline: 0; font-size: 1rem; } .modal-dialog input:focus { border-color: var(--color-primary); } .modal-dialog textarea { width: 100%; margin-top: .75rem; padding: .625rem .75rem; border: 1px solid var(--color-borders); border-radius: .625rem; background: var(--color-background); outline: 0; font-size: 1rem; line-height: 1.35; resize: vertical; min-height: 9rem; max-height: 50vh; } .modal-dialog textarea:focus { border-color: var(--color-primary); } /* the queue's university capsules: a name and how many of the queue it is */ .pills.caps { padding: .5rem .75rem .25rem; gap: .375rem; } /* the universities of the chosen city, a step in from the cities above */ .pills.caps.sub { padding-top: .125rem; padding-bottom: .375rem; } .pills.caps.sub .pill { font-size: .8125rem; padding: .3125rem .5625rem .3125rem .625rem; } .pills.caps .pill { padding: .375rem .625rem .375rem .75rem; font-size: .875rem; font-weight: 600; gap: .375rem; } .pills.caps .capn { font-style: normal; font-weight: 700; font-size: .75rem; min-width: 1.125rem; padding: 0 .3125rem; border-radius: .625rem; background: rgba(0, 0, 0, .1); text-align: center; } .pills.caps .pill.on .capn { background: rgba(255, 255, 255, .28); } /* a queued post the moderator ticked, and the tag on one they rewrote */ .acard.marked { box-shadow: inset .1875rem 0 0 var(--color-primary); } .acard .head .edited { color: var(--color-primary); font-weight: 500; } /* what became of a queued post: said on the card, green when it went, red and staying when it did not */ .acard .result { padding: .625rem .75rem; font-weight: 600; font-size: .9375rem; } .acard .result.ok { color: #34c759; } .acard .result.bad { color: var(--color-error); } .acard .actions button[disabled] { opacity: .5; pointer-events: none; } :root[data-theme="dark"] .pills.caps .capn { background: rgba(255, 255, 255, .14); } .modal-dialog .pills { padding: .5rem 0 0; } .modal-dialog .mbtns { display: flex; flex-direction: row-reverse; flex-wrap: wrap; gap: .5rem 1rem; margin-top: 1rem; } .modal-dialog .mbtns button { padding: .5rem .75rem; border-radius: .5rem; color: var(--color-primary); font-weight: 500; font-size: .9375rem; text-transform: uppercase; letter-spacing: .02em; position: relative; overflow: hidden; } .modal-dialog .mbtns button.danger { color: var(--color-error); } .sheet-root { position: fixed; inset: 0; z-index: 1520; } .qsheet-root { position: absolute; } /* inside #app: its bottom is the box's bottom, which the keyboard moves */ .sheet-root .backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .3); opacity: 0; transition: opacity .25s ease; } .sheet-root.open .backdrop { opacity: 1; } .sheet { position: absolute; left: .5rem; right: .5rem; bottom: calc(.5rem + var(--safe-bottom)); transform: translateY(120%); transition: transform var(--layer-transition); } .sheet-root.open .sheet { transform: none; } .sheet .grp { background: var(--color-background); border-radius: .875rem; overflow: hidden; margin-bottom: .5rem; } .sheet .srow { width: 100%; display: flex; align-items: center; gap: .875rem; height: 3.5rem; padding: 0 1.25rem; font-size: 1.0625rem; color: var(--color-primary); position: relative; overflow: hidden; } .sheet .srow.danger { color: var(--color-error); } .sheet .srow.text { color: var(--color-text); } .sheet .srow svg { width: 1.5rem; height: 1.5rem; } .sheet .srow + .srow { box-shadow: inset 0 .5px 0 var(--color-borders); } .sheet .cancel { font-weight: 600; justify-content: center; } /* the question / first-line sheet: rises from the bottom, sits on the keyboard */ .qsheet { position: absolute; left: 0; right: 0; bottom: 0; padding: .75rem 1rem calc(.75rem + var(--safe-bottom)); border-radius: 1.25rem 1.25rem 0 0; background: var(--color-background); box-shadow: 0 -.5rem 2rem rgba(0, 0, 0, .25); transform: translateY(110%); transition: transform var(--layer-transition); } .sheet-root.open .qsheet { transform: none; } .qsheet .qhead { display: flex; align-items: center; gap: .625rem; margin-bottom: .625rem; } .qsheet .qhead .avatar { width: 2.5rem; height: 2.5rem; font-size: 1.125rem; flex: none; } .qsheet .qhead .t { flex: 1; min-width: 0; line-height: 1.2; } .qsheet .qhead .t b { display: block; font-size: 1rem; font-weight: 700; } .qsheet .qhead .t span { display: block; font-size: .75rem; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qsheet .qx { flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--color-background-secondary); color: var(--color-text-secondary); position: relative; overflow: hidden; } .qsheet .qx svg { width: 1.125rem; height: 1.125rem; } .qsheet textarea { display: block; width: 100%; box-sizing: border-box; min-height: 5rem; max-height: 30vh; padding: .625rem .75rem; border: 0; border-radius: .75rem; background: var(--color-background-secondary); color: var(--color-text); font: inherit; font-size: 1.0625rem; line-height: 1.4; outline: 0; resize: none; -webkit-text-fill-color: var(--color-text); } .qsheet textarea::placeholder { color: var(--color-placeholders); -webkit-text-fill-color: var(--color-placeholders); } .qsheet textarea { caret-color: transparent; } .sheet-root.settled .qsheet textarea { caret-color: var(--color-primary); } .qsheet .qquote { margin: 0 0 .5rem; padding: .5rem .75rem; border-left: 3px solid #8b7cff; border-radius: .5rem; background: var(--color-background-secondary); font-size: .9375rem; line-height: 1.35; white-space: pre-wrap; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .qsheet .qfoot { display: flex; align-items: center; gap: .625rem; margin-top: .625rem; } .qsheet .qfoot .cnt { font-size: .75rem; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; } .qsheet .qfoot .cnt.near { color: var(--color-warning); } .qsheet .qfoot .cnt.over { color: var(--color-error); font-weight: 700; } .qsheet .qgo { margin-left: auto; display: inline-flex; align-items: center; gap: .375rem; height: 2.625rem; padding: 0 1rem; border-radius: 1.3125rem; background: linear-gradient(135deg, #8b7cff, #5a3fd6); color: #fff; font-size: .9375rem; font-weight: 700; position: relative; overflow: hidden; box-shadow: 0 .375rem 1rem rgba(90, 63, 214, .35); transition: opacity .2s ease; } .qsheet .qgo:disabled { opacity: .45; box-shadow: none; } .qsheet .qgo svg { width: 1.0625rem; height: 1.0625rem; } /* the filter sheet: chips in groups, the chosen one lit */ .flt-sheet { max-height: 80vh; overflow-y: auto; } .flt-sheet .flt-grp { margin-top: .5rem; } .flt-sheet .flt-title { font-size: .6875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-secondary); margin: .5rem 0 .375rem; } .flt-sheet .flt-chips { display: flex; flex-wrap: wrap; gap: .375rem; } .flt-sheet .flt-chip { display: inline-flex; align-items: center; gap: .375rem; height: 2.125rem; padding: 0 .5rem 0 .75rem; border-radius: 1.0625rem; background: var(--color-background-secondary); color: var(--color-text); font-size: .875rem; font-weight: 600; position: relative; overflow: hidden; max-width: 100%; } .flt-sheet .flt-chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .flt-sheet .flt-chip i { display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .375rem; border-radius: .625rem; background: rgba(127, 127, 127, .2); font-style: normal; font-size: .6875rem; font-weight: 700; } .flt-sheet .flt-chip.on { background: linear-gradient(135deg, #8b7cff, #5a3fd6); color: #fff; } .flt-sheet .flt-chip.on i { background: rgba(255, 255, 255, .25); } /* the link sheet */ .qsheet .avatar.lk { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; background: linear-gradient(135deg, #8b7cff, #5a3fd6); color: #fff; } .qsheet .avatar.lk svg { width: 1.25rem; height: 1.25rem; } .lsheet .lbox { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .75rem .875rem; border-radius: .875rem; background: var(--color-background-secondary); color: var(--color-primary); font-size: .9375rem; font-weight: 600; text-align: left; position: relative; overflow: hidden; } .lsheet .lbox .u { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: ltr; font-variant-numeric: tabular-nums; } .lsheet .lbox svg { flex: none; width: 1.125rem; height: 1.125rem; opacity: .8; } .lsheet .lrow { display: flex; gap: .5rem; margin-top: .625rem; } .lsheet .lrow .qgo { flex: 1; margin: 0; } .lsheet .qgo.ghost { background: var(--color-primary-tint); color: var(--color-primary); box-shadow: none; } .lsheet .lnote { margin-top: .75rem; padding: .625rem .75rem; border-radius: .75rem; background: var(--color-background-secondary); line-height: 1.35; } .lsheet .lnote b { display: block; font-size: .8125rem; margin-bottom: .125rem; } .lsheet .lnote span { display: block; font-size: .8125rem; color: var(--color-text-secondary); } .sheet .stitle { padding: .75rem 1.25rem .5rem; font-size: .8125rem; color: var(--color-text-secondary); text-align: center; } #toast { position: fixed; left: 50%; bottom: calc(var(--tabbar-space) + 1rem); transform: translateX(-50%); z-index: 1700; max-width: calc(100vw - 2rem); padding: .625rem 1rem; border-radius: 1rem; background: var(--color-toast-background); color: #fff; font-size: .9375rem; line-height: 1.3; text-align: center; animation: toast-in .25s cubic-bezier(.34, 1.56, .64, 1); } @keyframes toast-in { from { transform: translate(-50%, 1rem); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } } #viewer { position: fixed; inset: 0; z-index: 1500; background: #000; display: flex; align-items: center; justify-content: center; animation: fade-in .2s ease; } #viewer img { max-width: 100%; max-height: 100%; object-fit: contain; touch-action: none; user-select: none; -webkit-user-select: none; will-change: transform; transform-origin: center center; } #viewer .vtrack { position: absolute; inset: 0; will-change: transform; } #viewer.video .vslide video { max-width: 100%; max-height: 100%; width: 100%; outline: none; background: #000; } /* a video in a post (2026-10-07): the poster with a play badge; the moderator's thumbnail wears a small one in the corner */ .vthumb { position: relative; display: inline-grid; max-width: 100%; vertical-align: top; } .vthumb > img { grid-area: 1 / 1; } .vthumb .vplay { grid-area: 1 / 1; place-self: center; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff; pointer-events: none; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .vthumb .vplay svg { width: 1.5rem; height: 1.5rem; margin-left: .15rem; } .acard .vthumb .vplay, .mine .vthumb .vplay { width: 2rem; height: 2rem; } .acard .vthumb .vplay svg, .mine .vthumb .vplay svg { width: 1rem; height: 1rem; } img.vmark { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: -2px; } .wp-pic.busy img { opacity: .55; animation: pic-shimmer 1.2s ease-in-out infinite; } #viewer .vslide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } #viewer .vslide.l { transform: translate3d(calc(-100% - 40px), 0, 0); } #viewer .vslide.r { transform: translate3d(calc(100% + 40px), 0, 0); } #viewer .vslide[hidden] { display: none; } #viewer { touch-action: none; } #viewer.out { animation: fade-out .18s ease forwards; } #viewer .vdots { position: absolute; left: 0; right: 0; bottom: calc(var(--safe-bottom, 0px) + 1rem); display: flex; justify-content: center; gap: .375rem; pointer-events: none; } #viewer .vdots i { width: .4375rem; height: .4375rem; border-radius: 50%; background: rgba(255, 255, 255, .4); } #viewer .vdots i.on { background: #fff; } #viewer .vcount { margin-right: auto; align-self: center; color: #fff; font-size: .9375rem; font-weight: 600; opacity: .9; } #viewer.bare .vdots { opacity: 0; } @keyframes fade-out { to { opacity: 0; } } #viewer .vtop { position: absolute; left: 0; right: 0; top: 0; padding: calc(var(--safe-top) + .5rem) .75rem .75rem; display: flex; justify-content: flex-end; background: linear-gradient(rgba(0, 0, 0, .65), transparent); transition: opacity .2s ease, transform .2s ease; } #viewer .x { display: inline-flex; align-items: center; gap: .375rem; height: 2.375rem; padding: 0 .875rem 0 .625rem; border-radius: 1.1875rem; background: rgba(255, 255, 255, .18); color: #fff; font-size: .9375rem; font-weight: 600; position: relative; overflow: hidden; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } #viewer .x svg { width: 1.125rem; height: 1.125rem; } #viewer .vcap { position: absolute; left: 0; right: 0; bottom: 0; max-height: 40%; overflow-y: auto; padding: 1.5rem 1rem calc(var(--safe-bottom, 0px) + 1rem); color: #fff; font-size: .9375rem; line-height: 1.35; white-space: pre-wrap; word-break: break-word; background: linear-gradient(transparent, rgba(0, 0, 0, .75) 30%); transition: opacity .2s ease, transform .2s ease; } #viewer.bare .vtop { opacity: 0; transform: translateY(-.5rem); pointer-events: none; } #viewer.bare .vcap { opacity: 0; transform: translateY(.5rem); pointer-events: none; } .age-mark { font-size: 3rem; text-align: center; margin-bottom: .5rem; } .debug-log { font: .6875rem/1.35 ui-monospace, Menlo, monospace; white-space: pre-wrap; word-break: break-all; margin: 0 .75rem; padding: .75rem; background: var(--color-background); border-radius: .625rem; user-select: text; -webkit-user-select: text; } @media (prefers-reduced-motion: reduce) { .layer, .msg, .arrive > *, .fcard { animation: none !important; transition: none !important; } } /* A desktop window is not a phone: the app keeps a phone's width, centred, whatever the window's size. */ @media (min-width: 40rem) { body { background: var(--color-background-secondary); } #app { width: 26.25rem; max-width: 100%; margin: 0 auto; box-shadow: 0 0 0 1px var(--color-borders), 0 0 2.5rem rgba(0, 0, 0, .18); } .sheet { max-width: 25.25rem; margin: 0 auto; } .modal { max-width: 24rem; } #toast { max-width: 24rem; } } .wmsgs .ikb button.danger { color: var(--color-error); } :root[data-theme="dark"] .wmsgs .ikb button.danger { color: #ff6b6b; } /* the unread badge sits above the round button: the ripple clip would cut it, so the button does not clip and skips the wave */ .scroll-down.ripple { overflow: visible; } .scroll-down .ripple-wave { display: none; } /* the moderator ballot in the app: one tight line per candidate — name, share bar, count, a button */ .ballot { padding: .25rem .75rem; } .ballot .brow { display: flex; align-items: center; gap: .5rem; padding: .375rem 0; border-bottom: 1px solid var(--color-borders); } .ballot .brow:last-child { border-bottom: 0; } .ballot .brow.mine { background: var(--color-primary-tint); margin: 0 -.75rem; padding: .375rem .75rem; border-radius: .5rem; } .ballot .bleft { flex: 1; min-width: 0; } .ballot .bname { font-size: .9375rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ballot .bname span { color: var(--color-text-secondary); font-size: .8125rem; } .ballot .bbar { height: .25rem; margin-top: .25rem; border-radius: .125rem; background: var(--color-background-secondary-accent); overflow: hidden; } .ballot .bbar i { display: block; height: 100%; background: var(--color-primary); border-radius: .125rem; transition: width .4s ease; } .ballot .bn { flex: none; min-width: 3.5rem; text-align: right; font-size: .875rem; font-variant-numeric: tabular-nums; color: var(--color-text-secondary); } .ballot .pill { flex: none; height: 1.75rem; padding: 0 .625rem; font-size: .9375rem; } /* the quote of the post another one answers: on the wall, in the write screen, in the queue */ .reply-q { display: flex; align-items: flex-start; gap: .375rem; width: 100%; box-sizing: border-box; margin: .25rem 0 .375rem; padding: .375rem .625rem; border-left: 3px solid var(--color-primary); border-radius: .5rem; background: var(--color-primary-tint, rgba(51, 144, 236, .1)); text-align: left; font-size: .875rem; line-height: 1.3; color: var(--color-text); } .reply-q b { flex: none; color: var(--color-primary); font-weight: 600; } .reply-q span { flex: 1; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; opacity: .85; } .reply-q .x { flex: none; background: none; border: 0; color: var(--color-text-secondary); font-size: 1rem; padding: 0 .25rem; } .write .reply-q { margin: .5rem .75rem; width: calc(100% - 1.5rem); } /* ---- Дурак: cards, the felt, the lobby, the table ------------------------------- */ :root { --dk-felt: #1b6b45; --dk-felt-light: #2f9963; --dk-felt-dark: #0f4a2f; --dk-gold: #ffd166; --dk-card: #fffdf7; --dk-red: #d7263d; --dk-black: #1d1d1f; --dk-back-a: #2b4c9b; --dk-back-b: #1a2f66; } /* a playing card */ .pc { --w: 3.9rem; --h: 5.5rem; position: relative; width: var(--w); height: var(--h); border-radius: .5rem; background: var(--dk-card); color: var(--dk-black); box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 .25rem .75rem rgba(0, 0, 0, .18); flex: none; user-select: none; -webkit-user-select: none; font-family: var(--font-family-rounded); } .pc.red { color: var(--dk-red); } .pc .tl, .pc .br { position: absolute; display: flex; flex-direction: column; align-items: center; line-height: 1; font-size: calc(var(--w) * .26); } .pc .tl { top: .2rem; left: .25rem; } .pc .br { right: .25rem; bottom: .2rem; transform: rotate(180deg); } .pc .tl b, .pc .br b { font-weight: 800; letter-spacing: -.02em; } .pc .tl i, .pc .br i { font-style: normal; font-size: .8em; margin-top: .05rem; } .pc .mid { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--w) * .62); line-height: 1; opacity: .95; } .pc.back { background: linear-gradient(135deg, var(--dk-back-a), var(--dk-back-b)); box-shadow: inset 0 0 0 .1875rem #fff, inset 0 0 0 .25rem var(--dk-back-b), 0 1px 2px rgba(0, 0, 0, .3), 0 .2rem .5rem rgba(0, 0, 0, .2); } .pc.back::after { content: ""; position: absolute; inset: .35rem; border-radius: .25rem; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .16) 0 .18rem, transparent .18rem .5rem), repeating-linear-gradient(-45deg, rgba(255, 255, 255, .12) 0 .18rem, transparent .18rem .5rem); } .pc.mini { --w: 1.6rem; --h: 2.25rem; border-radius: .25rem; } .pc.mini.back { box-shadow: inset 0 0 0 .09rem #fff, inset 0 0 0 .13rem var(--dk-back-b), 0 1px 3px rgba(0, 0, 0, .35); } .pc.mini.back::after { inset: .18rem; border-radius: .1rem; } @keyframes pc-pop { 0% { transform: scale(.55) translateY(1.25rem) rotate(-6deg); opacity: 0; } 60% { transform: scale(1.06) translateY(-.15rem); opacity: 1; } 100% { transform: none; } } @keyframes pc-deal { 0% { transform: translateY(4rem) rotate(var(--rot, 0)) scale(.9); opacity: 0; } 100% { transform: translateY(0) rotate(var(--rot, 0)); opacity: 1; } } /* the card on the «Ігри» tab */ .dk-promo-box { margin: .25rem .75rem .625rem; } .dk-promo { position: relative; display: flex; align-items: stretch; gap: .5rem; width: 100%; min-height: 9.5rem; padding: 1.125rem 0 1.125rem 1.25rem; border-radius: 1.5rem; overflow: hidden; text-align: left; color: #fff; background: radial-gradient(120% 90% at 20% 0%, var(--dk-felt-light) 0, var(--dk-felt) 45%, var(--dk-felt-dark) 100%); box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .2), inset 0 0 0 1px rgba(255, 255, 255, .08); } .dk-promo::before { content: ""; position: absolute; inset: 0; background: url("pattern.svg") center / 22rem; opacity: .07; pointer-events: none; } .dk-promo .tx { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3rem; justify-content: center; } .dk-promo .tx b { font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; } .dk-promo .tx .sub { font-size: .8125rem; line-height: 1.35; opacity: .88; max-width: 15rem; } .dk-promo .live { display: inline-flex; align-items: center; gap: .4rem; margin-top: .25rem; font-size: .8125rem; font-weight: 600; color: var(--dk-gold); } .dk-promo .live .dot { width: .5rem; height: .5rem; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgba(74, 222, 128, .6); animation: seek-pulse 1.8s ease-out infinite; flex: none; } .dk-promo .fan { position: relative; z-index: 1; width: 8.25rem; flex: none; } .dk-promo .fan .pc { --w: 3.4rem; --h: 4.8rem; position: absolute; left: 50%; top: 50%; transform-origin: 50% 120%; transform: translate(-50%, -50%) rotate(var(--r)); box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .3); } .dk-promo .fan .pc:nth-child(1) { --r: -24deg; } .dk-promo .fan .pc:nth-child(2) { --r: -8deg; } .dk-promo .fan .pc:nth-child(3) { --r: 8deg; } .dk-promo .fan .pc:nth-child(4) { --r: 24deg; } .dk-promo:active .fan .pc { transition: transform .2s ease; } .dk-promo:active .fan .pc:nth-child(1) { --r: -30deg; } .dk-promo:active .fan .pc:nth-child(4) { --r: 30deg; } .dk-back-strip { display: flex; align-items: center; gap: .5rem; width: 100%; margin-top: .5rem; padding: .625rem .875rem; border-radius: .875rem; background: var(--color-background); color: var(--color-text); font-size: .9375rem; font-weight: 600; text-align: left; box-shadow: var(--shadow-island); } .dk-back-strip span { flex: 1; } .dk-back-strip svg { width: 1rem; height: 1rem; color: var(--color-gray); } /* the lobby */ .dk-lobby { padding-bottom: calc(1rem + var(--safe-bottom)); } .dk-head { position: relative; margin: .5rem .75rem .75rem; border-radius: 1.5rem; overflow: hidden; color: #fff; box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .2); } .dk-head .felt { position: absolute; inset: 0; background: radial-gradient(110% 80% at 50% 0%, var(--dk-felt-light) 0, var(--dk-felt) 50%, var(--dk-felt-dark) 100%); } .dk-head .felt::after { content: ""; position: absolute; inset: 0; background: url("pattern.svg") center / 22rem; opacity: .07; } .dk-head .hb { position: relative; z-index: 1; padding: 1.25rem 1.25rem 1rem; text-align: center; } .dk-head h2 { margin: 0 0 .375rem; font-size: 1.375rem; font-weight: 800; letter-spacing: -.01em; } .dk-head p { margin: 0 auto .875rem; font-size: .875rem; line-height: 1.4; opacity: .88; max-width: 20rem; } .dk-head .btn.create { background: #fff; color: var(--dk-felt-dark); font-weight: 700; box-shadow: 0 .375rem 1rem rgba(0, 0, 0, .2); } .dk-head .btn.code { color: #fff; height: 2.5rem; margin-top: .125rem; opacity: .9; } .dk-head .rec { margin-top: .5rem; font-size: .8125rem; color: var(--dk-gold); font-weight: 600; } .dk-mine { margin: 0 .75rem .25rem; } .dk-mine .dk-back-strip { margin-top: 0; } .dk-rooms { display: flex; flex-direction: column; gap: .625rem; padding: 0 .75rem; } .dk-room { background: var(--color-background); border-radius: 1rem; padding: .75rem .875rem .875rem; box-shadow: var(--shadow-island); } .dk-room.playing { opacity: .75; } .dk-room .top { display: flex; align-items: center; gap: .625rem; } .dk-room .top .info { flex: 1; min-width: 0; display: flex; flex-direction: column; } .dk-room .top .info b { font-size: 1rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dk-room .top .info span { font-size: .8125rem; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dk-room .top .pill { font-weight: 700; font-variant-numeric: tabular-nums; } .dk-room .names { margin: .5rem 0 0; font-size: .8125rem; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dk-room .row { display: flex; align-items: center; gap: .75rem; margin-top: .625rem; } .dk-room .seats { flex: 1; display: flex; gap: .375rem; } .dk-room .seats .avatar { width: 2rem; height: 2rem; font-size: .8125rem; box-shadow: 0 0 0 2px var(--color-background); } .dk-room .seats .avatar.away { opacity: .45; } .dk-room .seat-empty { width: 2rem; height: 2rem; border-radius: 50%; border: 1.5px dashed var(--color-gray); color: var(--color-gray); display: grid; place-items: center; font-size: 1rem; font-weight: 600; line-height: 1; } .dk-room .btn.small { flex: none; min-width: 5.5rem; } .dk-empty { text-align: center; padding: 2rem 2rem 2.5rem; color: var(--color-text-secondary); display: flex; flex-direction: column; align-items: center; gap: .25rem; } .dk-empty .mark { font-size: 3rem; line-height: 1; margin-bottom: .5rem; } .dk-empty b { color: var(--color-text); font-size: 1.0625rem; } .dk-empty span { font-size: .9375rem; line-height: 1.4; max-width: 18rem; } .dk-create .lbl { font-size: .8125rem; font-weight: 500; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: .02em; margin: .875rem 0 .25rem; } .dk-create .seg { margin: 0; } /* the table */ .dk-table { position: relative; display: flex; flex-direction: column; overflow: hidden; padding: 0; color: #fff; } .dk-table .felt { position: absolute; inset: 0; z-index: 0; background: radial-gradient(90% 70% at 50% 35%, var(--dk-felt-light) 0, var(--dk-felt) 55%, var(--dk-felt-dark) 100%); } .dk-table .felt::after { content: ""; position: absolute; inset: 0; background: url("pattern.svg") center / 22rem; opacity: .07; } .dk-table .felt::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0, 0, 0, .3) 100%); z-index: 1; } .dk-table > * { position: relative; z-index: 1; } .dk-table.waiting .dk-opps, .dk-table.waiting .dk-mid, .dk-table.waiting .dk-status, .dk-table.waiting .dk-timer, .dk-table.waiting .dk-hand, .dk-table.waiting .dk-bar { display: none; } .dk-table.playing .dk-wait { display: none; } .dk-table:not(.waiting):not(.playing) .dk-opps, .dk-table:not(.waiting):not(.playing) .dk-status, .dk-table:not(.waiting):not(.playing) .dk-bar, .dk-table:not(.waiting):not(.playing) .dk-wait { display: none; } /* gathering: the code on the table, the seats in a row */ .dk-wait { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0; padding: .5rem 1rem calc(.75rem + var(--safe-bottom)); gap: .875rem; } .dk-wait .tbl { position: relative; flex: none; width: 100%; height: 11rem; border-radius: 50% / 50%; background: radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, .08), rgba(0, 0, 0, .12) 70%, rgba(0, 0, 0, .2)); box-shadow: inset 0 0 0 .3rem rgba(255, 255, 255, .08), inset 0 0 3rem rgba(0, 0, 0, .3), 0 .5rem 1.5rem rgba(0, 0, 0, .25); display: grid; place-items: center; color: #fff; } .dk-wait .codebox { display: flex; flex-direction: column; align-items: center; gap: .125rem; } .dk-wait .codebox .cap { font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; opacity: .75; } .dk-wait .codebox b { font-size: 2.5rem; font-weight: 800; letter-spacing: .18em; padding-left: .18em; color: var(--dk-gold); text-shadow: 0 2px 10px rgba(0, 0, 0, .35); line-height: 1.1; } .dk-wait .codebox .hint { font-size: .75rem; opacity: .8; } .dk-wait .seatrow { display: flex; justify-content: center; gap: .375rem; } .dk-wait .seat { flex: 1 1 0; max-width: 5.25rem; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .2rem; text-align: center; position: relative; padding: .375rem 0; border-radius: .75rem; animation: arrive .3s ease both; } .dk-wait .seat .avatar { width: 3rem; height: 3rem; font-size: 1.125rem; box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .35), 0 0 0 .1875rem rgba(255, 255, 255, .25); } .dk-wait .seat b, .dk-wait .seat span { width: 100%; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.15; } .dk-wait .seat b { font-size: .75rem; font-weight: 600; } .dk-wait .seat span { font-size: .625rem; opacity: .8; } .dk-wait .seat.away .avatar { opacity: .5; filter: grayscale(.6); } .dk-wait .seat .crown { position: absolute; top: 0; right: calc(50% - 1.75rem); font-style: normal; font-size: .9rem; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4)); } .dk-wait .seat.empty { color: rgba(255, 255, 255, .75); } .dk-wait .seat.empty .plus { width: 3rem; height: 3rem; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, .5); display: grid; place-items: center; font-size: 1.5rem; font-weight: 300; line-height: 1; animation: seat-breathe 2.4s ease-in-out infinite; } .dk-wait .seat.empty b { font-weight: 500; opacity: .85; } @keyframes seat-breathe { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.06); opacity: 1; } } .dk-wait .waitline { text-align: center; font-size: .8125rem; opacity: .85; padding: 0 .5rem; } .dk-wait .opts { display: flex; gap: .5rem; margin: 0; } .dk-wait .seg { flex: 1; margin: 0; background: rgba(255, 255, 255, .14); } .dk-wait .seg button { color: #fff; } .dk-wait .seg button.on { background: #fff; color: var(--dk-felt-dark); } .dk-wait .seg button:disabled { opacity: .35; } .dk-wait .acts { display: flex; flex-direction: column; gap: .5rem; } .dk-wait .btn.secondary { background: rgba(255, 255, 255, .16); color: #fff; } .dk-wait .btn.start { background: var(--dk-gold); color: #3b2a00; font-weight: 700; box-shadow: 0 .375rem 1rem rgba(0, 0, 0, .25); } .dk-wait .btn.start:disabled { opacity: .6; } .dk-wait .hostnote { text-align: center; font-size: .875rem; opacity: .85; padding: .5rem 0; } .dk-wait .btn.leave { color: rgba(255, 255, 255, .75); height: 2.5rem; } /* the others */ .dk-opps { flex: none; display: flex; justify-content: space-evenly; align-items: flex-start; gap: .25rem; padding: .625rem .5rem 0; min-height: 6.75rem; } .dk-opps .opp { position: relative; display: flex; flex-direction: column; align-items: center; gap: .15rem; width: 5rem; text-align: center; transition: transform .25s ease, opacity .25s ease; } .dk-opps .opp .avatar { width: 2.5rem; height: 2.5rem; font-size: 1rem; box-shadow: 0 .2rem .5rem rgba(0, 0, 0, .35); transition: box-shadow .25s ease; } .dk-opps .opp.turn .avatar { box-shadow: 0 0 0 .2rem var(--dk-gold); } .dk-opps .opp.turn::before { content: ""; position: absolute; top: -.25rem; left: 50%; width: 3rem; height: 3rem; margin-left: -1.5rem; border-radius: 50%; border: .2rem solid var(--dk-gold); opacity: 0; animation: opp-turn 1.4s ease-out infinite; pointer-events: none; } @keyframes opp-turn { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } } .dk-opps .opp.away .avatar { opacity: .5; filter: grayscale(.6); } .dk-opps .opp.out { opacity: .55; } .dk-opps .opp.out .cards { display: none; } /* no cards left: the name and «вийшов» sit right under the avatar, no hole (2026-09-30, the user) */ .dk-opps .opp .cards { position: relative; height: 2.25rem; width: 100%; margin-top: .125rem; } .dk-opps .opp .cards .pc { position: absolute; left: 50%; top: 0; transform: translateX(calc(-50% + var(--k, 0) * .45rem)) rotate(calc(var(--k, 0) * 4deg)); transform-origin: 50% 150%; } .dk-opps .opp .cards .n { position: absolute; right: .25rem; bottom: -.25rem; min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem; border-radius: .625rem; background: #fff; color: var(--dk-black); font-size: .6875rem; font-weight: 700; line-height: 1.25rem; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); } .dk-opps .opp b { font-size: .75rem; font-weight: 600; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: .125rem; } .dk-opps .opp .role { font-size: .6875rem; opacity: .9; white-space: nowrap; } /* the middle: stock, bout, pile */ .dk-mid { flex: 1; min-height: 0; display: flex; align-items: center; gap: .25rem; padding: .25rem .5rem .25rem .875rem; } .dk-deck { width: 6.25rem; } .dk-pile { width: 4.5rem; } .dk-deck, .dk-pile { flex: none; display: flex; flex-direction: column; align-items: center; gap: .375rem; } .dk-deck .stack, .dk-pile .stack { position: relative; width: 3.25rem; height: 4.6rem; } .dk-deck .stack .pc, .dk-pile .stack .pc { --w: 3.25rem; --h: 4.6rem; position: absolute; left: 0; top: 0; transform: translate(calc(var(--k, 0) * -.08rem), calc(var(--k, 0) * -.08rem)); } .dk-deck .stack .pc.trump { transform: translate(1.9rem, .55rem) rotate(90deg); transform-origin: 50% 50%; z-index: -1; } .dk-deck .stack { margin-right: 1.5rem; } .dk-deck .stack.empty { display: grid; place-items: center; border-radius: .5rem; border: 2px dashed rgba(255, 255, 255, .35); } .dk-deck .stack.empty .suit { font-size: 2rem; color: #fff; } .dk-deck .stack.empty .suit.red { color: #ff8a80; } .dk-pile .stack .pc.pile { transform: translate(calc(var(--k, 0) * .15rem), calc(var(--k, 0) * -.1rem)) rotate(calc(var(--k, 0) * 7deg - 6deg)); } .dk-deck .n, .dk-pile .n { font-size: .6875rem; font-weight: 600; opacity: .85; text-align: center; white-space: nowrap; } .dk-board { --bs: 1; flex: 1; min-width: 0; align-self: stretch; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: calc(.625rem * var(--bs)) calc(.5rem * var(--bs)); padding: .25rem; } .dk-board .slot { position: relative; width: calc(4.4rem * var(--bs)); height: calc(5.9rem * var(--bs)); border-radius: .625rem; } .dk-board .slot .pc { --w: calc(3.4rem * var(--bs)); --h: calc(4.8rem * var(--bs)); position: absolute; left: 0; top: 0; } .dk-board .slot .pc.d { left: calc(1rem * var(--bs)); top: calc(1.1rem * var(--bs)); transform: rotate(9deg); z-index: 2; } .dk-board .slot .pc.pop { animation: pc-pop .32s cubic-bezier(.22, 1, .36, 1) both; } .dk-board .slot .pc.d.pop { animation-name: pc-pop-d; } @keyframes pc-pop-d { 0% { transform: scale(.55) translateY(1.25rem) rotate(20deg); opacity: 0; } 60% { transform: scale(1.06) rotate(9deg); opacity: 1; } 100% { transform: rotate(9deg); } } .dk-board .slot.target::before { content: ""; position: absolute; inset: -.375rem; border-radius: .875rem; border: 2px dashed var(--dk-gold); animation: target-blink 1s ease-in-out infinite; } @keyframes target-blink { 0%, 100% { opacity: .5; } 50% { opacity: 1; } } .dk-board .hintc { width: 100%; text-align: center; font-size: .875rem; opacity: .75; } /* the line that says what is going on, and the clock */ .dk-status { flex: none; text-align: center; font-size: .9375rem; font-weight: 500; padding: .25rem 1rem; min-height: 1.5rem; opacity: .9; transition: color .2s ease; } .dk-status.mine { color: var(--dk-gold); font-weight: 700; } .dk-timer { flex: none; height: .25rem; margin: .25rem 1.25rem .375rem; border-radius: .125rem; background: rgba(255, 255, 255, .18); overflow: hidden; } .dk-timer i { display: block; height: 100%; width: 100%; background: var(--dk-gold); transform-origin: left; transform: scaleX(1); transition: transform .2s linear; border-radius: .125rem; } .dk-timer.low i { background: #ff6b6b; } /* my hand */ .dk-hand { flex: none; position: relative; height: 6.75rem; margin: 0 .25rem; } .dk-hand .pc { position: absolute; bottom: .5rem; transform: rotate(var(--rot, 0)); transform-origin: 50% 130%; transition: transform .18s ease, bottom .18s ease, filter .2s ease; } .dk-hand .pc.dim { filter: brightness(.72) saturate(.7); } .dk-hand .pc.ok::after { display: none; } .dk-hand.mine .pc.ok { box-shadow: 0 0 0 .1875rem var(--dk-gold), 0 .25rem .75rem rgba(0, 0, 0, .25); } /* the rim follows the card's own corners */ .dk-hand .pc.sel { bottom: 1.75rem; z-index: 5; transform: rotate(0) scale(1.06); } .dk-hand .pc.deal { animation: pc-deal .35s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--i, 0) * 40ms); } .dk-hand .pc:active { transform: rotate(var(--rot, 0)) scale(.96); } /* the buttons */ .dk-bar { flex: none; display: flex; align-items: center; justify-content: center; gap: .625rem; min-height: 3.25rem; padding: .25rem 1rem calc(.625rem + var(--safe-bottom)); } .dk-bar .btn { width: auto; min-width: 7rem; height: 2.75rem; padding: 0 1.25rem; font-weight: 700; box-shadow: 0 .375rem 1rem rgba(0, 0, 0, .25); } .dk-bar .btn.take { background: #fff; color: var(--dk-red); } .dk-bar .btn.pass { background: #fff; color: #1c1c1e; } .dk-bar .btn.pass.bito { background: var(--dk-gold); color: #3b2a00; } .dk-bar .btn.cancel { color: rgba(255, 255, 255, .8); box-shadow: none; min-width: 0; } .dk-bar .passed { font-size: .875rem; font-weight: 600; color: var(--dk-gold); } /* a word across the table: бито, took, time out */ .dk-flash { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(.9); z-index: 20; padding: .625rem 1.25rem; border-radius: 1rem; background: rgba(0, 0, 0, .55); color: #fff; font-size: 1.0625rem; font-weight: 700; white-space: nowrap; pointer-events: none; animation: flash-in .25s cubic-bezier(.34, 1.56, .64, 1) both; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .3); } .dk-flash.ok { color: var(--dk-gold); } .dk-flash.warn { color: #ffd6d6; } .dk-flash.out { transition: opacity .35s ease, transform .35s ease; opacity: 0; transform: translate(-50%, -70%) scale(.95); } @keyframes flash-in { from { opacity: 0; transform: translate(-50%, -40%) scale(.8); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } /* the result */ .dk-over { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(0, 0, 0, .35); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fade-in .25s ease; } .dk-over .card { width: 100%; max-width: 22rem; margin: 0; padding: 1.25rem 1.25rem 1rem; border-radius: 1.5rem; text-align: center; color: var(--color-text); box-shadow: 0 1rem 3rem rgba(0, 0, 0, .35); animation: over-in .4s cubic-bezier(.34, 1.4, .64, 1) both; } @keyframes over-in { from { transform: translateY(2rem) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } } .dk-over .big { font-size: 3.5rem; line-height: 1; margin-bottom: .5rem; animation: float 3.2s ease-in-out infinite; } .dk-over h2 { margin: 0 0 .875rem; font-size: 1.375rem; font-weight: 800; } .dk-over .places { display: flex; flex-direction: column; gap: .375rem; text-align: left; margin-bottom: 1rem; } .dk-over .prow { display: flex; align-items: center; gap: .625rem; padding: .375rem .5rem; border-radius: .75rem; background: var(--color-background-secondary); } .dk-over .prow .m { width: 1.5rem; text-align: center; font-size: 1.125rem; } .dk-over .prow .avatar { width: 2rem; height: 2rem; font-size: .8125rem; } .dk-over .prow b { flex: 1; min-width: 0; font-size: .9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dk-over .prow span:last-child { font-size: .8125rem; color: var(--color-text-secondary); } .dk-over .prow.fool { background: #e5393518; } .dk-over .prow.left { opacity: .7; } .dk-over .acts { display: flex; flex-direction: column; gap: .25rem; } @media (prefers-reduced-motion: reduce) { .dk-board .slot .pc.pop, .dk-hand .pc.deal, .dk-opps .opp.turn .avatar, .dk-wait .seat.empty .plus, .dk-over .big { animation: none !important; } } /* short screens (old Androids at 360x640): the same table, every button still on screen */ @media (max-height: 720px) { .dk-opps { min-height: 5.5rem; padding-top: .375rem; } .dk-opps .opp .avatar { width: 2.125rem; height: 2.125rem; font-size: .875rem; } .dk-opps .opp .cards { height: 1.75rem; } .dk-opps .opp .cards .pc { --w: 1.3rem; --h: 1.85rem; } .dk-log { max-height: 3.4rem; } .dk-hand { height: 5.75rem; } .dk-hand .pc { --w: 3.3rem; --h: 4.6rem; } .dk-bar { min-height: 2.75rem; padding-bottom: calc(.25rem + var(--safe-bottom)); } .dk-bar .btn { height: 2.375rem; } .dk-mid { min-height: 5.5rem; } .dk-say { padding-top: .125rem; } .dk-wait { gap: .5rem; } .dk-wait .tbl { height: 8.5rem; } .dk-wait .codebox b { font-size: 2rem; } .dk-wait .seat .avatar, .dk-wait .seat.empty .plus { width: 2.5rem; height: 2.5rem; } .dk-wait .acts { gap: .375rem; } .dk-wait .btn { height: 2.625rem; } .dk-wait .btn.leave { height: 2rem; } } @media (max-height: 600px) { .dk-opps .opp .cards { display: none; } .dk-opps { min-height: 4rem; } .dk-log { max-height: 2.4rem; } .dk-wait .tbl { height: 6.5rem; } } /* ---- «Двіж»: three cards of one shape ------------------------------------------- */ .hub-cards { display: flex; flex-direction: column; gap: .5rem; padding: .25rem .75rem 0; } .hub-card { position: relative; display: flex; align-items: stretch; gap: .5rem; width: 100%; min-height: 6.75rem; padding: .75rem 0 .75rem 1rem; border-radius: 1.25rem; overflow: hidden; text-align: left; color: #fff; background: radial-gradient(120% 100% at 15% 0%, var(--hc-a) 0, var(--hc-b) 50%, var(--hc-c) 100%); box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .18), inset 0 0 0 1px rgba(255, 255, 255, .08); isolation: isolate; } .hub-card::before { content: ""; position: absolute; inset: 0; background: url("pattern.svg") center / 22rem; opacity: .07; pointer-events: none; } .hub-card .glow { position: absolute; right: -3rem; top: -3rem; width: 11rem; height: 11rem; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 70%); pointer-events: none; animation: halo 3.6s ease-in-out infinite; } .hub-card .tx { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: .3rem; } .hub-card .tx b { font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; } .hub-card .tx .sub { font-size: .75rem; line-height: 1.3; opacity: .9; max-width: 14.5rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hub-card .live { display: inline-flex; align-items: center; gap: .4rem; align-self: flex-start; max-width: 100%; margin-top: .25rem; padding: .3rem .75rem .3rem .55rem; border-radius: 1rem; background: rgba(0, 0, 0, .22); font-size: .8125rem; font-weight: 600; opacity: .9; line-height: 1.25; } .hub-card .live > span { min-width: 0; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hub-card .live { align-self: stretch; display: flex; } .hub-card .live .dot { width: .5rem; height: .5rem; border-radius: 50%; background: rgba(255, 255, 255, .55); flex: none; } .hub-card .live.on { opacity: 1; color: var(--hc-live, #ffd166); background: rgba(0, 0, 0, .3); } .hub-card .live.on .dot { background: #4ade80; box-shadow: 0 0 0 0 rgba(74, 222, 128, .6); animation: seek-pulse 1.8s ease-out infinite; } .hub-card > svg.chev, .hub-card > svg:last-child { position: relative; z-index: 1; width: 1.25rem; height: 1.25rem; flex: none; opacity: .7; } .hub-card:active { transform: scale(.985); transition: transform .12s ease; } .hub-card.anon { --hc-a: #4fa3ff; --hc-b: #2d5fd4; --hc-c: #1e3a8a; } .hub-card.flirt { --hc-a: #ff7eb3; --hc-b: #c2337a; --hc-c: #6d1b4b; --hc-live: #ffe0ec; } .hub-card.durak { --hc-a: #2f9963; --hc-b: #1b6b45; --hc-c: #0f4a2f; } .hub-card.ask { --hc-a: #8b7cff; --hc-b: #5a3fd6; --hc-c: #2a1c6e; --hc-live: #ffd166; } .hub-card .art.ask { display: flex; align-items: center; justify-content: center; position: relative; } .hub-card .art.ask .mask { font-size: 2.75rem; filter: drop-shadow(0 .375rem .75rem rgba(0, 0, 0, .35)); } .hub-card .art.ask .bub { position: absolute; top: .5rem; right: .75rem; padding: .25rem .5rem; border-radius: .75rem .75rem .125rem .75rem; background: #fff; color: #2a1c6e; font-size: .6875rem; font-weight: 700; box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .2); transform: rotate(6deg); } .hub-card .live { margin-top: .125rem; padding: .2rem .625rem .2rem .5rem; font-size: .75rem; } /* «Запитай мене» */ .ask-mine { position: relative; overflow: hidden; display: flex; align-items: center; gap: .625rem; margin: .5rem .75rem .25rem; padding: .625rem .625rem .625rem .75rem; border-radius: 1rem; color: #fff; background: radial-gradient(120% 120% at 100% 0%, #8b7cff 0%, #5a3fd6 45%, #2a1c6e 100%); box-shadow: 0 .5rem 1.25rem rgba(42, 28, 110, .3); } .ask-mine::before { content: ""; position: absolute; inset: 0; background: url("pattern.svg") center / 22rem; opacity: .07; pointer-events: none; } .ask-mine > * { position: relative; } .ask-mine .avatar { width: 2.75rem; height: 2.75rem; font-size: 1.25rem; flex: none; box-shadow: 0 0 0 .125rem rgba(255, 255, 255, .35); } .ask-mine .t { flex: 1; min-width: 0; line-height: 1.2; } .ask-mine .t b { display: block; font-size: 1rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ask-mine .t span { display: block; font-size: .75rem; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ask-mine.off .t span { color: #ffb4b4; } .ask-mine.off .avatar { filter: grayscale(1); } .ask-mine.make { display: block; padding: .875rem 1rem; } .ask-mine.make b { display: block; font-size: 1.125rem; font-weight: 800; margin-bottom: .25rem; } .ask-mine.make > span { display: block; font-size: .8125rem; opacity: .9; line-height: 1.35; } .ask-mine.make .btn { margin-top: .75rem; background: #fff; color: #2a1c6e; } .ask-whats { display: flex; justify-content: center; gap: .5rem; margin-top: .5rem; } .ask-mine.make .ask-whats .ask-what { margin: 0; } .ask-mine.make .ask-what { display: block; margin: .5rem auto 0; padding: .25rem .75rem; border-radius: 1rem; background: rgba(255, 255, 255, .16); color: #fff; font-size: .8125rem; font-weight: 600; position: relative; overflow: hidden; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .25); } .ask-ibs { display: flex; gap: .375rem; flex: none; } .ask-ib { width: 2.25rem; height: 2.25rem; border-radius: .6875rem; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .28); position: relative; overflow: hidden; } .ask-ib svg { width: 1.0625rem; height: 1.0625rem; } .ask-ib:active { background: rgba(255, 255, 255, .3); } .ask-tabs { margin: .5rem .75rem .25rem; } .ask-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: .3125rem; } .ask-tabs .n { position: static; top: auto; right: auto; display: inline-grid; place-items: center; min-width: 1.125rem; height: 1.125rem; padding: 0 .3125rem; border-radius: .5625rem; background: var(--color-primary); color: #fff; font-style: normal; font-size: .6875rem; font-weight: 700; line-height: 1; } .ask-tabs button.on .n { background: #fff; color: var(--color-primary); } .capsule.hot { margin: .5rem .75rem; width: calc(100% - 1.5rem); background: var(--color-primary-tint); color: var(--color-primary); } .ask-head { display: flex; align-items: center; gap: .75rem; padding: .625rem .625rem .5rem; } .ask-card .avatar { width: 3rem; height: 3rem; font-size: 1.25rem; } .ask-bar { display: flex; align-items: center; gap: .5rem; margin: .5rem .75rem .25rem; } .ask-bar .ask-filter { margin: 0; flex: none; } .ask-q { flex: 1; min-width: 0; display: flex; align-items: center; gap: .375rem; height: 2.125rem; padding: 0 .625rem; border-radius: 1.0625rem; background: var(--color-background); box-shadow: var(--shadow-island); } .ask-q svg { flex: none; width: 1rem; height: 1rem; color: var(--color-text-secondary); } .ask-q input { flex: 1; min-width: 0; border: 0; background: transparent; outline: 0; color: var(--color-text); font: inherit; font-size: .9375rem; -webkit-appearance: none; appearance: none; } .ask-q input::placeholder { color: var(--color-placeholders); } .ask-q input::-webkit-search-cancel-button { -webkit-appearance: none; } .ask-filter { display: inline-flex; align-items: center; gap: .375rem; margin: .5rem .75rem .25rem; height: 2.125rem; padding: 0 .625rem 0 .75rem; border-radius: 1.0625rem; background: var(--color-background); color: var(--color-text); font-size: .875rem; font-weight: 600; box-shadow: var(--shadow-island); position: relative; overflow: hidden; } .ask-filter.on { background: var(--color-primary); color: #fff; } .ask-filter svg { width: 1rem; height: 1rem; opacity: .8; } .ask-filter svg:last-child { transform: rotate(90deg); width: .875rem; height: .875rem; } .ask-seg button { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ask-card .info .last { color: var(--color-text); } /* the feed moves, it does not blink: a new profile slides in with a glow, a changed one flashes, a gone one folds, a moved one glides */ .ask-card.in { animation: ask-in .38s cubic-bezier(.2, .8, .2, 1) both; } @keyframes ask-in { 0% { opacity: 0; transform: translateY(-.625rem) scale(.985); background: var(--color-primary-tint); } 60% { opacity: 1; transform: none; background: var(--color-primary-tint); } 100% { background: var(--color-background); } } .ask-card.bump { animation: ask-bump .7s ease-out both; } @keyframes ask-bump { 0%, 35% { background: var(--color-primary-tint); } 100% { background: var(--color-background); } } .ask-card.out { transition: height .24s cubic-bezier(.4, 0, .2, 1), opacity .16s ease, padding .24s cubic-bezier(.4, 0, .2, 1), min-height .24s; opacity: 0; min-height: 0; padding-top: 0; padding-bottom: 0; pointer-events: none; } .ask-card.flip { transition: transform .32s cubic-bezier(.2, .8, .2, 1); z-index: 1; } .ask-views.pop, .ask-tabs .n.pop { animation: ask-pop .38s cubic-bezier(.2, .8, .2, 1); } @keyframes ask-pop { 0% { transform: scale(.7); } 55% { transform: scale(1.18); } 100% { transform: none; } } .ask-wall { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: .2rem; height: 1.25rem; padding: 0 .45rem; border-radius: .625rem; background: var(--color-primary-tint); color: var(--color-primary); font-size: .75rem; font-weight: 600; } .ask-wall svg { width: .8rem; height: .8rem; } .ask-card .avatar { font-size: 1.25rem; } .ask-setup .form-field { display: block; width: 100%; margin: .625rem 0 0; padding: .625rem .75rem; border: 0; border-radius: .625rem; background: var(--color-background-secondary); color: var(--color-text); font-size: 1rem; outline: 0; box-sizing: border-box; } .ask-setup .ask-hint { margin: .75rem 0 .375rem; font-size: .75rem; color: var(--color-text-secondary); } .ask-setup .photo-grid { padding: 0; max-height: 14rem; overflow: hidden; transition: max-height .3s cubic-bezier(.32, .72, 0, 1), opacity .25s ease, margin .3s ease; } .ask-setup .ask-hint, .ask-setup > .note { transition: max-height .3s cubic-bezier(.32, .72, 0, 1), opacity .25s ease, margin .3s ease; max-height: 6rem; overflow: hidden; } .ask-setup.kb .photo-grid, .ask-setup.kb .ask-hint, .ask-setup.kb > .note { max-height: 0; opacity: 0; margin: 0; } .ask-setup .row-item.setting:first-child { margin-top: 0; } .ask-setup .row-item { margin-top: .625rem; padding-left: 0; } .ask-setup .btn { margin-top: .875rem; } .ask-setup .ask-del { margin-top: .5rem; color: var(--color-error); background: transparent; box-shadow: none; } .ask-setup .wq-sw { margin-left: auto; flex: none; } .ask-setup textarea.form-field { resize: none; line-height: 1.35; min-height: 4.5rem; } .wq-sw.plain .knob::after { content: none; } .wq-sw.plain.on { background: var(--color-primary); box-shadow: none; } /* the profile's head: the first picture blurred behind, the face large in front, the name, the line, two tiles */ .ask-top { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; padding: .875rem 1rem .75rem; background: var(--color-background); box-shadow: 0 .5px 0 var(--color-borders); } .ask-top .bg { position: absolute; inset: -15%; background: center / cover no-repeat; filter: blur(28px) saturate(1.2); transform: scale(1.1); } .ask-top .veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 10, 30, .35) 0%, rgba(12, 10, 30, .6) 60%, rgba(12, 10, 30, .78) 100%); } .ask-top > :not(.bg):not(.veil) { position: relative; } .ask-top.pic { color: #fff; } .ask-top .avatar.hero { width: 6rem; height: 6rem; font-size: 2.75rem; box-shadow: 0 0 0 .1875rem rgba(255, 255, 255, .85), 0 .5rem 1.5rem rgba(0, 0, 0, .35); } .ask-top > b { display: block; margin-top: .5rem; font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; } .ask-top .sub { display: block; margin-top: .125rem; font-size: .8125rem; color: var(--color-text-secondary); } .ask-top.pic .sub { color: rgba(255, 255, 255, .78); } .ask-views { display: inline-flex; align-items: center; gap: .3rem; margin-top: .5rem; height: 1.5rem; padding: 0 .625rem; border-radius: .75rem; background: var(--color-background-secondary); color: var(--color-text-secondary); font-size: .75rem; line-height: 1; white-space: nowrap; } .ask-views svg { width: .875rem; height: .875rem; opacity: .8; } .ask-views b { font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; } .ask-top.pic .ask-views { background: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .ask-top.pic .ask-views b { color: #fff; } .ask-mine .t .ask-views { display: inline-flex; margin-top: .25rem; height: 1.25rem; padding: 0 .5rem; font-size: .6875rem; opacity: 1; overflow: visible; } .ask-mine .t .ask-views span { display: inline; font-size: inherit; overflow: visible; } .ask-top .line { margin: .375rem 0 0; max-width: 22rem; font-size: .9375rem; line-height: 1.3; color: var(--color-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; word-break: break-word; } .ask-top.pic .line { color: #fff; } .ask-top .ask-blocked { margin-top: .625rem; width: 100%; box-sizing: border-box; } .ask-tiles { display: flex; gap: .5rem; width: 100%; margin-top: .75rem; } .ask-tiles .tile { flex: 1; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: .5rem; height: 2.875rem; border-radius: .75rem; background: var(--color-primary-tint); color: var(--color-primary); font-size: .75rem; font-weight: 600; position: relative; overflow: hidden; } .ask-top.pic .ask-tiles .tile { background: rgba(255, 255, 255, .16); color: #fff; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .25); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .ask-tiles .tile svg { width: 1.25rem; height: 1.25rem; } .ask-tiles .tile span { font-size: .875rem; } .ask-tiles .tile:active { opacity: .7; } .ask-doors { display: flex; flex-direction: row; gap: .5rem; } .ask-doors .door { flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: .375rem; height: 3.125rem; padding: 0 .625rem; border-radius: 1.5625rem; font-size: .9375rem; font-weight: 700; white-space: nowrap; position: relative; overflow: hidden; color: #fff; background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .ask-doors .door.main { background: #fff; color: #2a1c6e; box-shadow: 0 .375rem 1rem rgba(0, 0, 0, .3); } .ask-doors .door svg { width: 1.0625rem; height: 1.0625rem; flex: none; } .ask-doors .door span { overflow: hidden; text-overflow: ellipsis; } .ask-doors .door:active { transform: scale(.98); } .ask-big { display: grid; place-items: center; height: 22rem; font-size: 5rem; background: radial-gradient(120% 120% at 100% 0%, #8b7cff 0%, #5a3fd6 45%, #2a1c6e 100%); } .ask-write { margin-top: .625rem; padding: .75rem .875rem; } .ask-write .quote { margin: 0 0 .625rem; padding: .5rem .75rem; border-left: 3px solid #8b7cff; border-radius: .5rem; background: var(--color-background-secondary); font-size: 1rem; line-height: 1.4; } .ask-write textarea.form-field { display: block; width: 100%; padding: .625rem .75rem; border: 0; border-radius: .625rem; background: var(--color-background-secondary); color: var(--color-text); font-size: 1rem; outline: 0; resize: none; box-sizing: border-box; } .ask-write .btn { margin-top: .625rem; } .ask-go { background: linear-gradient(135deg, #8b7cff, #5a3fd6); box-shadow: 0 .5rem 1.25rem rgba(90, 63, 214, .35); } /* the wall: every answered question as a small exchange */ .ask-qa { margin: 0 .75rem .5rem; padding: .625rem .625rem .5rem; border-radius: 1rem; background: var(--color-background); box-shadow: var(--shadow-island); } .ask-qa .qrow, .ask-qa .arow { display: flex; align-items: flex-end; gap: .5rem; } .ask-qa .arow { justify-content: flex-end; margin-top: .5rem; } .ask-qa .avatar { width: 1.875rem; height: 1.875rem; font-size: .9375rem; flex: none; } .ask-qa .avatar.mask { background: linear-gradient(135deg, #6b6b78, #3a3a44); } .ask-qa .avatar.own { background: linear-gradient(135deg, #8b7cff, #5a3fd6); } .ask-qa .qb, .ask-qa .ab { max-width: 82%; padding: .5rem .75rem .375rem; font-size: .9375rem; line-height: 1.35; white-space: pre-wrap; word-break: break-word; } .ask-qa .qb { border-radius: 1rem 1rem 1rem .25rem; background: var(--color-background-secondary); color: var(--color-text); } .ask-qa .ab { border-radius: 1rem 1rem .25rem 1rem; background: linear-gradient(135deg, #8b7cff, #5a3fd6); color: #fff; box-shadow: 0 .375rem 1rem rgba(90, 63, 214, .28); } .ask-qa .qb b, .ask-qa .ab b { display: block; font-size: .6875rem; font-weight: 700; margin-bottom: .125rem; opacity: .75; } .ask-qa .qb b { color: var(--color-primary); opacity: 1; } .ask-qa time { display: block; margin-top: .125rem; font-size: .625rem; color: var(--color-text-meta); text-align: right; } .ask-qa .hide { display: inline-flex; align-items: center; gap: .25rem; margin-top: .5rem; padding: .25rem .5rem; border-radius: .75rem; font-size: .75rem; color: var(--color-text-secondary); background: var(--color-background-secondary); position: relative; overflow: hidden; } .ask-qa .hide svg { width: .875rem; height: .875rem; } .ask-blocked { padding: .75rem .875rem; border-radius: .75rem; background: #e5393514; color: var(--color-error); font-size: .9375rem; line-height: 1.35; } .ask-write .btn { margin-top: .625rem; } #tab-hub .dk-back-strip { width: auto; margin: .75rem .75rem 0; } #tab-hub .capsule.wide { margin-top: .75rem; } /* the pictures on the cards */ .hub-card .art { position: relative; z-index: 1; flex: none; width: 8.75rem; } /* Дурак: a fan of real cards */ .hub-card .art.durak .pc { --w: 3.4rem; --h: 4.8rem; position: absolute; left: 50%; top: 50%; transform-origin: 50% 125%; transform: translate(-50%, -52%) rotate(var(--r)); box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .3); } .hub-card .art.durak .pc:nth-child(1) { --r: -24deg; } .hub-card .art.durak .pc:nth-child(2) { --r: -8deg; } .hub-card .art.durak .pc:nth-child(3) { --r: 8deg; } .hub-card .art.durak .pc:nth-child(4) { --r: 24deg; } .hub-card:active .art.durak .pc { transition: transform .2s ease; } .hub-card:active .art.durak .pc:nth-child(1) { --r: -30deg; } .hub-card:active .art.durak .pc:nth-child(4) { --r: 30deg; } /* Флірситет: a fan of profiles, the top one with a like */ .hub-card .art.flirt .fc { position: absolute; left: 50%; top: 50%; width: 3.9rem; height: 5.3rem; border-radius: .6rem; overflow: hidden; background: #fff; box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .3); transform-origin: 50% 120%; transform: translate(-50%, -52%) rotate(calc(-16deg + var(--i) * 16deg)); } .hub-card .art.flirt .fc .ph { position: absolute; inset: 0; background: linear-gradient(160deg, var(--ph-a), var(--ph-b)); } .hub-card .art.flirt .fc .ph::before { content: ""; position: absolute; left: 50%; top: 22%; width: 1.35rem; height: 1.35rem; border-radius: 50%; transform: translateX(-50%); background: rgba(255, 255, 255, .85); } .hub-card .art.flirt .fc .ph::after { content: ""; position: absolute; left: 50%; top: 52%; width: 2.6rem; height: 2rem; border-radius: 1.3rem 1.3rem 0 0; transform: translateX(-50%); background: rgba(255, 255, 255, .85); } .hub-card .art.flirt .fc:nth-child(1) .ph { --ph-a: #ffd6a5; --ph-b: #ff8fab; } .hub-card .art.flirt .fc:nth-child(2) .ph { --ph-a: #a0c4ff; --ph-b: #7b4dff; } .hub-card .art.flirt .fc:nth-child(3) .ph { --ph-a: #caffbf; --ph-b: #2ec4b6; } .hub-card .art.flirt .fc .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: .25rem .3rem .3rem; background: linear-gradient(transparent, rgba(0, 0, 0, .6)); color: #fff; display: flex; flex-direction: column; line-height: 1.1; } .hub-card .art.flirt .fc .cap b { font-size: .5625rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hub-card .art.flirt .fc .cap span { font-size: .4375rem; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hub-card .art.flirt .heart { position: absolute; left: 50%; top: 50%; transform: translate(1.2rem, -3rem); width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #ff3c32; box-shadow: 0 .375rem .75rem rgba(0, 0, 0, .3); animation: heart-beat 1.6s ease-in-out infinite; } .hub-card .art.flirt .heart svg { width: 1rem; height: 1rem; } @keyframes heart-beat { 0%, 100% { transform: translate(1.2rem, -3rem) scale(1); } 15% { transform: translate(1.2rem, -3rem) scale(1.2); } 30% { transform: translate(1.2rem, -3rem) scale(1); } 45% { transform: translate(1.2rem, -3rem) scale(1.15); } } .hub-card:active .art.flirt .fc { transition: transform .2s ease; } .hub-card:active .art.flirt .fc:nth-child(1) { transform: translate(-50%, -52%) rotate(-22deg); } .hub-card:active .art.flirt .fc:nth-child(3) { transform: translate(-50%, -52%) rotate(22deg); } /* the anonymous chat: three lines of a talk, a die */ .hub-card .art.anon { display: flex; flex-direction: column; justify-content: center; gap: .3rem; padding: 0 .875rem 0 .25rem; } .hub-card .art.anon .bub { max-width: 7.25rem; padding: .3rem .55rem; border-radius: .8rem; font-size: .625rem; line-height: 1.25; font-weight: 500; box-shadow: 0 .2rem .5rem rgba(0, 0, 0, .18); animation: bub-in .4s ease both; animation-delay: calc(var(--i) * .35s); position: relative; } .hub-card .art.anon .bub.in { align-self: flex-start; background: #fff; color: #1c1c1e; border-bottom-left-radius: .2rem; } .hub-card .art.anon .bub.out { align-self: flex-end; background: linear-gradient(135deg, #34c759, #1fa049); color: #fff; border-bottom-right-radius: .2rem; } @keyframes bub-in { from { opacity: 0; transform: translateY(.4rem) scale(.9); } to { opacity: 1; transform: none; } } .hub-card .art.anon .die { position: absolute; right: .25rem; top: -.5rem; width: 1.75rem; height: 1.75rem; border-radius: .45rem; display: grid; place-items: center; background: #fff; color: #2d5fd4; box-shadow: 0 .375rem .75rem rgba(0, 0, 0, .3); transform: rotate(14deg); animation: die-wobble 2.8s ease-in-out infinite; } .hub-card .art.anon .die svg { width: 1.2rem; height: 1.2rem; stroke-width: 2.2; } @keyframes die-wobble { 0%, 100% { transform: rotate(14deg) translateY(0); } 50% { transform: rotate(-8deg) translateY(-.2rem); } } @media (prefers-reduced-motion: reduce) { .hub-card .art.flirt .heart, .hub-card .art.anon .die, .hub-card .glow { animation: none !important; } } /* a word across the table: the line at the bottom, the bubbles by the seats */ .dk-say { flex: none; display: flex; align-items: center; gap: .25rem; padding: .25rem .625rem calc(.5rem + var(--safe-bottom)); } .dk-table.playing .dk-bar { padding-bottom: .25rem; } .dk-table.waiting .dk-wait { padding-bottom: .25rem; } .dk-say .emo { flex: none; width: 2.125rem; height: 2.125rem; border-radius: 50%; font-size: 1.25rem; line-height: 1; display: grid; place-items: center; background: rgba(255, 255, 255, .12); transition: transform .12s ease; } .dk-say .emo:active { transform: scale(1.25); background: rgba(255, 255, 255, .25); } .dk-say input { flex: 1; min-width: 4rem; height: 2.125rem; padding: 0 .75rem; border: 0; border-radius: 1.0625rem; background: rgba(0, 0, 0, .28); color: #fff; font-size: .9375rem; outline: 0; } .dk-say input::placeholder { color: rgba(255, 255, 255, .55); } .dk-say .go { flex: none; width: 2.125rem; height: 2.125rem; border-radius: 50%; display: grid; place-items: center; background: var(--dk-gold); color: #3b2a00; } .dk-say .go svg { width: 1.125rem; height: 1.125rem; } .dk-bub { position: absolute; left: 50%; top: -.5rem; transform: translate(-50%, -100%); z-index: 8; max-width: 9rem; padding: .3rem .6rem; border-radius: .875rem; border-bottom-left-radius: .25rem; background: #fff; color: #1c1c1e; font-size: .8125rem; font-weight: 500; line-height: 1.25; text-align: left; box-shadow: 0 .375rem 1rem rgba(0, 0, 0, .3); animation: bub-pop .25s cubic-bezier(.34, 1.56, .64, 1) both, bub-fade .5s ease 5.4s both; pointer-events: none; word-break: break-word; } .dk-opps .opp .dk-bub { top: auto; bottom: -.25rem; transform: translate(-50%, 100%); border-radius: .875rem; border-top-left-radius: .25rem; } .dk-hand .dk-bub.me { top: -.25rem; left: 50%; background: linear-gradient(135deg, #34c759, #1fa049); color: #fff; border-bottom-left-radius: .875rem; border-bottom-right-radius: .25rem; } .dk-wait .seat .dk-bub { top: -.25rem; } @keyframes bub-pop { from { opacity: 0; transform: translate(-50%, -100%) scale(.6); } to { opacity: 1; } } .dk-opps .opp .dk-bub { animation-name: bub-pop-down, bub-fade; } @keyframes bub-pop-down { from { opacity: 0; transform: translate(-50%, 100%) scale(.6); } to { opacity: 1; } } @keyframes bub-fade { to { opacity: 0; } } .dk-emo { position: absolute; left: 50%; top: 0; z-index: 9; font-size: 2.5rem; line-height: 1; pointer-events: none; filter: drop-shadow(0 .25rem .5rem rgba(0, 0, 0, .35)); animation: emo-fly 2.4s ease-out both; } .dk-hand .dk-emo { top: -1rem; } @keyframes emo-fly { 0% { opacity: 0; transform: translate(-50%, 0) scale(.4); } 15% { opacity: 1; transform: translate(-50%, -.75rem) scale(1.35); } 35% { transform: translate(-50%, -1rem) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -3.5rem) scale(1); } } /* the table's chat: a short log above the status line, lines stay and slide up as new ones come */ .dk-log { flex: none; display: flex; flex-direction: column; justify-content: flex-end; gap: .2rem; max-height: 5.75rem; overflow-y: auto; overflow-x: hidden; padding: 0 .875rem .25rem; scroll-behavior: smooth; } /* no fade at the top: the older lines stay readable, the log scrolls */ .dk-log:empty { display: none; } .dk-log .line { flex: none; align-self: flex-start; max-width: 85%; padding: .25rem .625rem; border-radius: .875rem; background: rgba(0, 0, 0, .32); color: #fff; font-size: .8125rem; line-height: 1.3; word-break: break-word; animation: log-in .3s cubic-bezier(.22, 1, .36, 1) both; } .dk-log .line.me { align-self: flex-end; background: rgba(255, 209, 102, .22); } .dk-log .line b { font-weight: 700; margin-right: .35rem; color: var(--dk-gold); } .dk-log .line.me b { color: #fff; } .dk-log .line.emo span { font-size: 1.125rem; line-height: 1; vertical-align: -.125rem; } @keyframes log-in { from { opacity: 0; transform: translateY(.75rem); max-height: 0; padding-top: 0; padding-bottom: 0; } to { opacity: 1; transform: none; max-height: 4rem; } } .dk-table.waiting .dk-log { display: flex; order: 5; max-height: 6.5rem; } .dk-table.waiting .dk-log:empty { display: none; } .dk-table.waiting .dk-wait { order: 4; flex: 1; } .dk-table .dk-say { order: 9; } .dk-table .dk-over { order: 8; } .dk-mid { overflow: hidden; } /* the countdown to the deal */ .dk-wait .waitline.count { font-size: 1rem; font-weight: 600; color: var(--dk-gold); opacity: 1; } .dk-wait .waitline .cd { font-size: 1.375rem; font-variant-numeric: tabular-nums; display: inline-block; min-width: 1.4rem; text-align: center; animation: cd-pulse 1s ease-in-out infinite; } @keyframes cd-pulse { 0% { transform: scale(1.25); } 40%, 100% { transform: scale(1); } } .dk-wait .btn.start.counting { background: rgba(255, 255, 255, .16); color: #fff; box-shadow: none; } .dk-wait .btn.start.counting .cd { font-variant-numeric: tabular-nums; min-width: 1.2rem; text-align: center; } /* typing at the table: nothing goes away, everything gets tighter to fit above the keyboard */ .dk-table.typing .dk-opps { min-height: 3.25rem; padding-top: .375rem; } .dk-table.typing .dk-opps .opp .avatar { width: 2rem; height: 2rem; font-size: .8125rem; } .dk-table.typing .dk-opps .opp .cards { height: 1.25rem; margin-top: 0; } .dk-table.typing .dk-opps .opp .cards .pc { display: none; } .dk-table.typing .dk-opps .opp .cards .n { right: auto; left: 50%; transform: translateX(-50%); bottom: 0; } .dk-table.typing .dk-opps .opp b { font-size: .6875rem; margin-top: 0; } .dk-table.typing .dk-opps .opp .role { display: none; } .dk-table.typing .dk-mid { min-height: 4.75rem; padding: 0 .5rem 0 .75rem; } .dk-table.typing .dk-deck { width: 4rem; } .dk-table.typing .dk-pile { width: 3rem; } .dk-table.typing .dk-deck .stack, .dk-table.typing .dk-pile .stack { width: 2.2rem; height: 3.1rem; margin-right: 1rem; } .dk-table.typing .dk-deck .stack .pc, .dk-table.typing .dk-pile .stack .pc { --w: 2.2rem; --h: 3.1rem; } .dk-table.typing .dk-deck .stack .pc.trump { transform: translate(1.3rem, .4rem) rotate(90deg); } .dk-table.typing .dk-deck .n, .dk-table.typing .dk-pile .n { display: none; } .dk-table.typing .dk-log { max-height: 3.4rem; } .dk-table.typing .dk-status { font-size: .8125rem; padding: 0 1rem; min-height: 1.25rem; } .dk-table.typing .dk-timer { margin: .125rem 1.25rem .25rem; } .dk-table.typing .dk-hand { height: 4.5rem; } .dk-table.typing .dk-hand .pc { --w: 2.7rem; --h: 3.8rem; bottom: .25rem; } .dk-table.typing .dk-bar { min-height: 2.25rem; padding: 0 1rem .125rem; } .dk-table.typing .dk-bar .btn { height: 2.125rem; min-width: 5.5rem; font-size: .9375rem; } .dk-table.typing .dk-wait { gap: .5rem; padding-top: .25rem; padding-bottom: 0; justify-content: flex-start; } .dk-table.typing .dk-wait .tbl { height: 5rem; } .dk-table.typing .dk-wait .codebox b { font-size: 1.5rem; } .dk-table.typing .dk-wait .codebox .hint { display: none; } .dk-table.typing .dk-wait .seat .avatar, .dk-table.typing .dk-wait .seat.empty .plus { width: 2.25rem; height: 2.25rem; font-size: .875rem; } .dk-table.typing .dk-wait .seat span { display: none; } .dk-table.typing .dk-wait .opts, .dk-table.typing .dk-wait .btn.leave, .dk-table.typing .dk-wait .btn.secondary { display: none; } .dk-table.typing .dk-wait .btn.start { height: 2.25rem; } .dk-table.typing .dk-say { background: rgba(0, 0, 0, .18); padding-top: .375rem; } /* a layer under another one: its animations sleep (the hub's cards were burning the phone behind the table) */ .layer.dim *, .layer.dim *::before, .layer.dim *::after { animation-play-state: paused !important; } /* typing in the waiting room: the room scrolls instead of spilling over the log */ .dk-table.typing .dk-wait { flex: 0 1 auto; min-height: 0; overflow-y: auto; } .dk-table.typing .dk-log { flex: none; } .dk-log { scroll-behavior: auto; } /* the table changes size smoothly: the keyboard's coming and going, the typing mode */ .dk-opps, .dk-opps .opp .avatar, .dk-opps .opp .cards, .dk-opps .opp b, .dk-mid, .dk-deck, .dk-pile, .dk-deck .stack, .dk-pile .stack, .dk-deck .stack .pc, .dk-pile .stack .pc, .dk-board .slot, .dk-board .slot .pc, .dk-log, .dk-status, .dk-timer, .dk-hand, .dk-bar, .dk-bar .btn, .dk-say .emo, .dk-wait, .dk-wait .tbl, .dk-wait .codebox b, .dk-wait .seat .avatar, .dk-wait .seat.empty .plus, .dk-wait .btn { transition: width .28s cubic-bezier(.32, .72, 0, 1), height .28s cubic-bezier(.32, .72, 0, 1), min-height .28s cubic-bezier(.32, .72, 0, 1), max-height .28s cubic-bezier(.32, .72, 0, 1), padding .28s cubic-bezier(.32, .72, 0, 1), margin .28s cubic-bezier(.32, .72, 0, 1), font-size .28s cubic-bezier(.32, .72, 0, 1), gap .28s cubic-bezier(.32, .72, 0, 1); } .dk-hand .pc { transition: width .28s cubic-bezier(.32, .72, 0, 1), height .28s cubic-bezier(.32, .72, 0, 1), left .28s cubic-bezier(.32, .72, 0, 1), transform .18s ease, bottom .28s cubic-bezier(.32, .72, 0, 1), filter .2s ease; } .dk-board .slot .pc.d { transition: width .28s cubic-bezier(.32, .72, 0, 1), height .28s cubic-bezier(.32, .72, 0, 1), left .28s cubic-bezier(.32, .72, 0, 1), top .28s cubic-bezier(.32, .72, 0, 1); } .dk-deck .stack .pc.trump { transition: transform .28s cubic-bezier(.32, .72, 0, 1), width .28s cubic-bezier(.32, .72, 0, 1), height .28s cubic-bezier(.32, .72, 0, 1); } /* the chat line sits on the bottom edge whatever the screen above it does */ .dk-table .dk-say { margin-top: auto; } .dk-room .btn.small svg { width: 1rem; height: 1rem; } /* who am I at the table: the choice and the line in the lobby */ .dk-ident .mtext { margin-bottom: .75rem; } .dk-idopt { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .625rem .75rem; margin-top: .5rem; border-radius: .875rem; background: var(--color-background-secondary); text-align: left; } .dk-idopt .avatar { width: 2.75rem; height: 2.75rem; font-size: 1.125rem; } .dk-idopt .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; } .dk-idopt .tx b { font-size: 1rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dk-idopt .tx span { font-size: .8125rem; color: var(--color-text-secondary); } .dk-idopt > svg { width: 1rem; height: 1rem; color: var(--color-gray); flex: none; } .dk-head .who { display: inline-flex; align-items: center; gap: .5rem; margin-top: .75rem; padding: .25rem .75rem .25rem .25rem; border-radius: 1.25rem; background: rgba(255, 255, 255, .14); color: #fff; font-size: .8125rem; font-weight: 500; max-width: 100%; } .dk-head .who .avatar { width: 1.75rem; height: 1.75rem; font-size: .75rem; } .dk-head .who span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dk-head .who i { font-style: normal; opacity: .75; } /* friends in the lobby */ .dk-friends { display: flex; flex-direction: column; gap: .5rem; padding: 0 .75rem calc(1rem + var(--safe-bottom)); } .dk-friends .frow { display: flex; align-items: center; gap: .625rem; padding: .625rem .75rem; border-radius: 1rem; background: var(--color-background); box-shadow: var(--shadow-island); } .dk-friends .frow.ask { background: color-mix(in srgb, var(--color-primary) 10%, var(--color-background)); } .dk-friends .frow .avatar { width: 2.5rem; height: 2.5rem; font-size: 1rem; } .dk-friends .frow .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; } .dk-friends .frow .tx b { font-size: .9375rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dk-friends .frow .tx span { font-size: .8125rem; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dk-friends .frow .btn.small { height: 2rem; min-width: 0; padding: 0 .75rem; font-size: .875rem; } .dk-friends .frow .btn.small svg { width: .9rem; height: .9rem; } .dk-friends .fempty { text-align: center; padding: 1.25rem 1.5rem 1.5rem; color: var(--color-text-secondary); display: flex; flex-direction: column; gap: .25rem; font-size: .875rem; line-height: 1.4; } .dk-friends .fempty b { color: var(--color-text); font-size: 1rem; } .dk-wait .seat.tap, .dk-opps .opp { cursor: pointer; } .dk-wait .seat.tap:active .avatar, .dk-opps .opp:active .avatar { transform: scale(.94); } .dk-seg { margin: .25rem .75rem .625rem; } .dk-seg button { height: 2.25rem; font-size: .9375rem; } .vhide { display: none !important; } /* who attacks, who defends: rings and a label, visible whatever the clock says */ .dk-opps .opp .role { padding: .1rem .5rem; border-radius: .75rem; background: rgba(0, 0, 0, .28); margin-top: .125rem; } .dk-opps .opp.att .avatar { box-shadow: 0 0 0 .2rem var(--dk-gold), 0 .2rem .5rem rgba(0, 0, 0, .35); } .dk-opps .opp.att .role { background: rgba(255, 209, 102, .28); color: #ffeeb8; } .dk-opps .opp.def .avatar { box-shadow: 0 0 0 .2rem #ff8a80, 0 .2rem .5rem rgba(0, 0, 0, .35); } .dk-opps .opp.def .role { background: rgba(255, 107, 107, .32); color: #ffd6d6; } .dk-opps .opp.turn.def::before { border-color: #ff8a80; } /* watching: no hand, no buttons — the bout and the talk get the room */ .dk-table.watching .dk-hand, .dk-table.watching .dk-bar { display: none !important; } .dk-table.watching .dk-log { max-height: 9rem; } .dk-table.watching .dk-status { padding-bottom: .5rem; } .dk-table.watching .dk-timer { margin-bottom: .75rem; } .dk-friends .btn.finvite { height: 2.75rem; margin-bottom: .25rem; } .dk-friends .frow.out { opacity: .85; } .dk-friends .frow.tap { cursor: pointer; } .dk-friends .frow.tap:active { background: var(--color-chat-hover); } /* five at the top (a watcher sees them all): the seats share the width */ .dk-opps .opp { flex: 1 1 0; min-width: 0; max-width: 5rem; } .dk-opps .opp b { max-width: 100%; } /* calling friends to the table */ .dk-call .mtext { margin-bottom: .5rem; } .dk-call .clist { max-height: 55vh; overflow-y: auto; display: flex; flex-direction: column; gap: .375rem; margin: 0 -.25rem; padding: 0 .25rem; } .dk-call .crow { display: flex; align-items: center; gap: .625rem; padding: .375rem .5rem; border-radius: .75rem; background: var(--color-background-secondary); } .dk-call .crow .avatar { width: 2.25rem; height: 2.25rem; font-size: .9375rem; } .dk-call .crow .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; } .dk-call .crow .tx b { font-size: .9375rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dk-call .crow .tx span { font-size: .75rem; color: var(--color-text-secondary); } .dk-call .crow .btn.small { height: 1.875rem; min-width: 0; padding: 0 .625rem; font-size: .8125rem; } /* friends picked while creating a table */ .fchips { display: flex; gap: .5rem; overflow-x: auto; padding: .25rem .125rem .375rem; margin: 0 -.25rem; scrollbar-width: none; } .fchips::-webkit-scrollbar { display: none; } .fchip { flex: none; display: flex; flex-direction: column; align-items: center; gap: .25rem; width: 4rem; padding: .375rem 0; border-radius: .875rem; background: var(--color-background-secondary); font-size: .6875rem; color: var(--color-text); position: relative; } .fchip .avatar { width: 2.5rem; height: 2.5rem; font-size: 1rem; transition: box-shadow .15s ease; } .fchip span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fchip .st { font-style: normal; font-size: .5625rem; color: #34c759; font-weight: 700; height: .75rem; line-height: .75rem; } .fchip.picked { background: var(--color-primary-tint); color: var(--color-primary); } .fchip.picked .avatar { box-shadow: 0 0 0 .1875rem var(--color-primary); } /* the invitation card */ .dk-invite { text-align: center; padding-top: 1.5rem; overflow: hidden; position: relative; } .dk-invite .cards { position: absolute; left: 50%; top: -1.5rem; width: 9rem; height: 6rem; transform: translateX(-50%); background: radial-gradient(circle, rgba(27, 107, 69, .35), transparent 70%); pointer-events: none; } .dk-invite .avatar.big { width: 4.5rem; height: 4.5rem; font-size: 1.75rem; margin: 0 auto .75rem; box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .25), 0 0 0 .25rem var(--dk-gold); } .dk-invite h2 { margin: 0 0 .25rem; font-size: 1.25rem; font-weight: 800; } .dk-invite p { margin: 0 0 1rem; color: var(--color-text-secondary); font-size: .9375rem; } .dk-invite .btn { margin-top: .25rem; background: var(--dk-felt); } .dk-invite .btn.plain { background: transparent; } .avatar img { border-radius: 50%; } .dk-room.locked { opacity: .8; } .dk-room .btn.small:disabled { opacity: .6; } .dk-ident .tagnote { margin: -.25rem 0 .5rem; padding: .5rem .75rem; border-radius: .75rem; background: var(--color-primary-tint); color: var(--color-text); font-size: .8125rem; line-height: 1.35; } .dk-ident .tagnote b { color: var(--color-primary); font-weight: 600; } /* the rating: level chips, the ladder, the record line */ .lvl { display: inline-grid; place-items: center; width: 1.375rem; height: 1.375rem; border-radius: 50%; font-size: .6875rem; font-weight: 800; color: #111; background: var(--lc, #8e8e93); box-shadow: 0 0 0 .125rem rgba(0, 0, 0, .25); flex: none; font-family: var(--font-family-rounded); } .lvl.big { width: 1.75rem; height: 1.75rem; font-size: .875rem; } .avatar .lvl.onav { position: absolute; right: -.2rem; bottom: -.2rem; width: 1.125rem; height: 1.125rem; font-size: .5625rem; box-shadow: 0 0 0 .125rem var(--dk-felt-dark); } .avatar { position: relative; overflow: visible; } .avatar img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .dk-head .rec { display: flex; align-items: center; gap: .75rem; margin-top: .75rem; padding: .625rem .75rem; border-radius: 1rem; background: rgba(0, 0, 0, .22); color: #fff; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); } .dk-head .rec:active { background: rgba(0, 0, 0, .3); } .dk-head .rec .rl .lvl.big { width: 2.5rem; height: 2.5rem; font-size: 1.125rem; box-shadow: 0 0 0 .1875rem rgba(255, 255, 255, .25); } .dk-head .rec .rm { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .125rem; } .dk-head .rec .rm b { font-size: 1.375rem; font-weight: 800; line-height: 1.1; color: var(--dk-gold); font-variant-numeric: tabular-nums; } .dk-head .rec .rm span { font-size: .75rem; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dk-head .rec .rbar { height: .3rem; margin-top: .25rem; border-radius: .15rem; background: rgba(255, 255, 255, .18); overflow: hidden; } .dk-head .rec .rbar i { display: block; height: 100%; background: var(--dk-gold); border-radius: .15rem; transition: width .4s ease; } .dk-head .rec .rr { flex: none; display: flex; flex-direction: column; align-items: flex-end; } .dk-head .rec .rr b { font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; } .dk-head .rec .rr span { font-size: .6875rem; opacity: .75; } .dk-head .rec > svg { width: 1rem; height: 1rem; opacity: .6; flex: none; } .dk-head .who { margin-top: .625rem; } .dk-top { display: flex; flex-direction: column; gap: .375rem; padding: 0 .75rem calc(1rem + var(--safe-bottom)); } .dk-top .group-title { padding-left: .5rem; } .dk-top .trow { display: flex; align-items: center; gap: .5rem; padding: .5rem .625rem; border-radius: .875rem; background: var(--color-background); box-shadow: var(--shadow-island); } .dk-top .trow.me { background: color-mix(in srgb, var(--dk-felt) 18%, var(--color-background)); box-shadow: inset 0 0 0 1px var(--dk-felt-light); } .dk-top .trow.p1 { background: color-mix(in srgb, #ffd166 16%, var(--color-background)); } .dk-top .trow .place { width: 2rem; text-align: center; font-size: .8125rem; font-weight: 700; color: var(--color-text-secondary); flex: none; } .dk-top .trow.p1 .place, .dk-top .trow.p2 .place, .dk-top .trow.p3 .place { font-size: 1.125rem; } .dk-top .trow .avatar { width: 2.25rem; height: 2.25rem; font-size: .9375rem; } .dk-top .trow .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; } .dk-top .trow .tx b { font-size: .9375rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dk-top .trow .tx span { font-size: .75rem; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dk-top .trow .rating { font-size: 1.0625rem; font-weight: 800; font-variant-numeric: tabular-nums; flex: none; } .dk-over .prow .delta { font-size: .8125rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-text-secondary); } .dk-over .prow .delta.up { color: #1fa049; } .dk-over .prow .delta.down { color: var(--color-error); } .dk-over .myrt { margin: -.25rem 0 .75rem; padding: .5rem .75rem; border-radius: .75rem; background: var(--color-background-secondary); font-size: .9375rem; } .dk-over .myrt b { font-size: 1.25rem; font-weight: 800; } .dk-over .myrt.up b { color: #1fa049; } .dk-over .myrt.down b { color: var(--color-error); } .lvl-none { display: none; } .dk-head .rec .rl .rico { font-size: 1.75rem; line-height: 1; } .dk-head .rec .rm b { font-size: 1.5rem; } /* the stock is gone: the trump card lies where it was, faded, with a gold rim */ .dk-deck .stack.gone .pc.trump { transform: rotate(-8deg); z-index: 1; opacity: .8; box-shadow: 0 0 0 .125rem var(--dk-gold), 0 .25rem .75rem rgba(0, 0, 0, .35); left: .35rem; top: .15rem; } .dk-deck .stack.gone .pc.trump::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(27, 107, 69, .18); } .dk-deck .stack.gone + .n { color: var(--dk-gold); font-weight: 700; } /* the green dot on an avatar: in the app right now */ .avatar.on::after { content: ""; position: absolute; right: -.05rem; bottom: -.05rem; width: 28%; height: 28%; min-width: .625rem; min-height: .625rem; border-radius: 50%; background: #34c759; box-shadow: 0 0 0 .14rem var(--color-background); } .dk-friends .frow .avatar.on::after, .dk-call .crow .avatar.on::after, .fchip .avatar.on::after { box-shadow: 0 0 0 .14rem var(--color-background); } .fchip .avatar.on::after { box-shadow: 0 0 0 .14rem var(--color-background-secondary); } .dk-wait .seat .avatar.on::after, .dk-opps .opp .avatar.on::after { display: none; } /* at the table «away» already says it */ .dk-friends .frow .tx .st { display: inline-flex; align-items: center; gap: .3rem; font-size: .8125rem; color: var(--color-text-secondary); } .dk-friends .frow .tx .st.on { color: #34c759; font-weight: 600; } /* Флірситет: those who liked me, as cards with the two answers */ .likes-title, .match-title { display: flex; align-items: baseline; gap: .5rem; } .likes-title i, .match-title i { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--color-text-secondary); } .like-cards { display: flex; flex-direction: column; gap: .5rem; padding: 0 .75rem .625rem; } .like-card { display: flex; align-items: center; gap: .75rem; padding: .625rem .75rem; border-radius: 1rem; background: var(--color-background); box-shadow: var(--shadow-island), inset 0 0 0 1px rgba(255, 60, 50, .12); position: relative; overflow: hidden; transition: transform .26s ease, opacity .26s ease; } .like-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: .25rem; background: linear-gradient(#ff7eb3, #ff3c32); } .like-card .avatar { width: 3.5rem; height: 3.5rem; font-size: 1.375rem; flex: none; cursor: pointer; } .like-card .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; cursor: pointer; } .like-card .tx b { font-size: 1.0625rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .like-card .tx > span { font-size: .8125rem; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .like-card .tx p { margin: .125rem 0 0; font-size: .8125rem; line-height: 1.3; color: var(--color-text); opacity: .85; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .like-card .acts { display: flex; gap: .5rem; flex: none; } .like-card .lk { width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .15); transition: transform .12s ease; } .like-card .lk:active { transform: scale(.9); } .like-card .lk svg { width: 1.375rem; height: 1.375rem; } .like-card .lk.no { background: var(--color-background-secondary-accent); color: var(--color-text-secondary); } .like-card .lk.yes { background: linear-gradient(135deg, #ff7eb3, #ff3c32); color: #fff; } .like-card.going-yes { transform: translateX(40%) rotate(4deg); opacity: 0; } .like-card.going-no { transform: translateX(-40%) rotate(-4deg); opacity: 0; } .match-rows .avatar { width: 2.75rem; height: 2.75rem; font-size: 1.125rem; } .match-empty { margin: 0 .75rem .75rem; padding: 1rem; border-radius: 1rem; background: var(--color-background); display: flex; flex-direction: column; gap: .125rem; color: var(--color-text-secondary); font-size: .875rem; } .match-empty b { color: var(--color-text); font-size: 1rem; } /* a card with something waiting: a badge on the corner, a breathing rim */ .hub-card .hub-badge { position: absolute; top: .75rem; right: .75rem; z-index: 3; padding: .3rem .625rem; border-radius: 1rem; background: #fff; color: #c2337a; font-size: .875rem; font-weight: 800; box-shadow: 0 .375rem 1rem rgba(0, 0, 0, .3); animation: badge-pop .5s cubic-bezier(.34, 1.56, .64, 1) both, badge-bounce 2.4s ease-in-out 1s infinite; } .hub-card.durak .hub-badge { color: var(--dk-felt-dark); } @keyframes badge-pop { from { transform: scale(0) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes badge-bounce { 0%, 100% { transform: translateY(0); } 10% { transform: translateY(-.3rem) scale(1.06); } 20% { transform: translateY(0); } } .hub-card.alert { box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .18), 0 0 0 .1875rem rgba(255, 255, 255, .55); animation: card-breathe 2.4s ease-in-out infinite; } @keyframes card-breathe { 0%, 100% { box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .18), 0 0 0 .125rem rgba(255, 255, 255, .35); } 50% { box-shadow: 0 .5rem 1.75rem rgba(0, 0, 0, .22), 0 0 0 .25rem rgba(255, 255, 255, .75), 0 0 1.5rem rgba(255, 255, 255, .25); } } .hub-card.alert .art.flirt .heart { animation-duration: .9s; } .hub-card.flirt .hub-badge { top: auto; bottom: .875rem; right: .875rem; } @media (prefers-reduced-motion: reduce) { .hub-card.alert, .hub-card .hub-badge { animation: none !important; } } /* whose move it is, said in gold; the others' roles quietly */ .dk-opps .opp .role.now { background: var(--dk-gold); color: #3b2a00; font-weight: 700; } .dk-opps .opp .role.dim { opacity: .55; } .dk-opps .opp.turn::after { content: "ХІД"; position: absolute; top: -.35rem; left: 50%; transform: translateX(-50%); padding: .05rem .4rem; border-radius: .5rem; background: var(--dk-gold); color: #3b2a00; font-size: .5625rem; font-weight: 800; letter-spacing: .06em; box-shadow: 0 .125rem .375rem rgba(0, 0, 0, .3); } /* the clock, plainly visible: a thick bar and the seconds */ .dk-timer { height: .5rem; margin: .25rem 3.25rem .375rem 1.25rem; position: relative; overflow: visible; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); border-radius: .25rem; } .dk-timer i { border-radius: .25rem; box-shadow: none; } .dk-timer.low i { box-shadow: none; } .dk-timer b { position: absolute; right: -2.9rem; top: 50%; transform: translateY(-50%); font-size: .8125rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--dk-gold); min-width: 2.5rem; text-align: left; } .dk-timer.low b { color: #ff8a80; } .dk-table.typing .dk-timer { height: .375rem; } /* cards in flight */ .pc.fly { box-shadow: 0 1rem 2rem rgba(0, 0, 0, .45), 0 0 0 .1rem rgba(255, 255, 255, .5); } .dk-board .slot .pc.land { animation: pc-land .28s cubic-bezier(.34, 1.56, .64, 1) both; } .dk-board .slot .pc.d.land { animation-name: pc-land-d; } @keyframes pc-land { 0% { transform: scale(1.12); } 100% { transform: none; } } @keyframes pc-land-d { 0% { transform: rotate(9deg) scale(1.12); } 100% { transform: rotate(9deg); } } /* the last card of the stock: the trump, upright, with a gold rim */ .dk-deck .stack.last .pc.trump { transform: none; z-index: 1; left: .35rem; top: 0; box-shadow: 0 0 0 .125rem var(--dk-gold), 0 .25rem .75rem rgba(0, 0, 0, .35); } /* the seconds stay on screen while typing too */ .dk-table.typing .dk-timer { margin: .125rem 3.25rem .25rem 1.25rem; } /* my move: the hand glows, the status breathes, a word flashes */ .dk-hand::before { display: none; } @keyframes hand-glow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } } .dk-status.mine { animation: status-breathe 1.6s ease-in-out infinite; text-shadow: 0 0 .75rem rgba(255, 209, 102, .6); } @keyframes status-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } } .dk-table.myturn .dk-timer i { box-shadow: none; } .dk-flash.turn { top: 38%; padding: .875rem 1.5rem; font-size: 1.375rem; border-radius: 1.25rem; background: rgba(255, 209, 102, .95); color: #3b2a00; box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .35), 0 0 0 .25rem rgba(255, 255, 255, .35); animation: turn-in .35s cubic-bezier(.34, 1.56, .64, 1) both; } @keyframes turn-in { from { opacity: 0; transform: translate(-50%, -30%) scale(.6); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } @media (prefers-reduced-motion: reduce) { .dk-hand.mine::before, .dk-status.mine { animation: none !important; } } .dk-flash.turn { top: 30%; font-size: 1.125rem; padding: .625rem 1.125rem; } .dk-board .slot .pc.land { animation: none; } /* my move without words: a wave through the hand, a gold line under it, the button pops */ .dk-hand.wave .pc { animation: card-wave .55s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(var(--i, 0) * 45ms); } @keyframes card-wave { 0% { translate: 0 0; } 40% { translate: 0 -.75rem; } 100% { translate: 0 0; } } .dk-hand::after { content: ""; position: absolute; left: 50%; bottom: .1rem; width: 0; height: .25rem; border-radius: .125rem; background: var(--dk-gold); transform: translateX(-50%); opacity: 0; transition: width .35s ease, opacity .3s ease; pointer-events: none; } .dk-hand.mine::after { display: none; } @keyframes line-breathe { 0%, 100% { opacity: .6; } 50% { opacity: 1; } } .dk-bar.pop .btn { animation: btn-pop .45s cubic-bezier(.34, 1.56, .64, 1) both; } @keyframes btn-pop { 0% { transform: scale(.85); } 100% { transform: scale(1); } } .dk-tick { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); width: 2rem; height: 2rem; border-radius: 50%; background: var(--dk-gold); color: #3b2a00; font-weight: 900; font-size: 1.125rem; display: grid; place-items: center; box-shadow: 0 .375rem 1rem rgba(0, 0, 0, .35); animation: tick-in .8s ease both; pointer-events: none; } .dk-pile { position: relative; } @keyframes tick-in { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 25% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 70% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -80%) scale(1); } } .dk-status.mine { animation: none; text-shadow: none; } /* «+3»: what the taker got */ .dk-plus { position: absolute; left: 50%; top: 0; transform: translate(-50%, -20%); z-index: 9; padding: .2rem .6rem; border-radius: 1rem; background: #fff; color: var(--dk-red); font-weight: 800; font-size: .9375rem; box-shadow: 0 .375rem 1rem rgba(0, 0, 0, .35); animation: plus-in 1.2s ease both; pointer-events: none; } .dk-hand .dk-plus { top: -.5rem; } @keyframes plus-in { 0% { opacity: 0; transform: translate(-50%, 20%) scale(.6); } 20% { opacity: 1; transform: translate(-50%, -20%) scale(1.1); } 70% { opacity: 1; transform: translate(-50%, -30%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -80%); } } .pc.back.fly { --w: 2.5rem; --h: 3.5rem; } /* the end of a bout, named over the table while the cards still lie there */ .dk-round { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 12; padding: .5rem 1.125rem; border-radius: 1rem; font-size: 1.125rem; font-weight: 800; white-space: nowrap; box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .35); animation: round-in .28s cubic-bezier(.34, 1.56, .64, 1) both; pointer-events: none; } .dk-round.ok { background: var(--dk-gold); color: #3b2a00; } .dk-round.take { background: #fff; color: var(--dk-red); } .dk-round.out { transition: opacity .35s ease, transform .35s ease; opacity: 0; transform: translate(-50%, -80%); } @keyframes round-in { from { opacity: 0; transform: translate(-50%, -30%) scale(.7); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } .dk-mid { position: relative; } /* the opening deal: light backs, no drama; the taker's «+N» small */ .pc.back.fly.quiet { box-shadow: 0 .125rem .375rem rgba(0, 0, 0, .3), inset 0 0 0 .09rem #fff, inset 0 0 0 .13rem var(--dk-back-b); border-radius: .3rem; } .pc.back.fly.quiet::after { inset: .15rem; } .dk-plus { padding: .1rem .45rem; font-size: .75rem; font-weight: 700; background: rgba(255, 255, 255, .92); box-shadow: 0 .2rem .5rem rgba(0, 0, 0, .3); } .dk-hand .dk-plus { top: -.25rem; } /* short screens (old Androids, 360x640 and the like): everything gives way before the chat line and the buttons do */ .dk-mid { flex: 1 1 0; min-height: 0; } .dk-log { flex: 0 1 auto; min-height: 0; } @media (max-height: 700px) { .dk-opps { min-height: 4.75rem; padding-top: .25rem; } .dk-opps .opp .avatar { width: 2rem; height: 2rem; font-size: .8125rem; } .dk-opps .opp .cards { height: 1.4rem; } .dk-opps .opp .cards .pc { --w: 1.1rem; --h: 1.55rem; } .dk-opps .opp b { font-size: .6875rem; } .dk-opps .opp .role { font-size: .625rem; padding: .05rem .4rem; } .dk-log { max-height: 2.7rem; } .dk-status { font-size: .8125rem; min-height: 1.25rem; padding: 0 1rem; } .dk-timer { height: .375rem; margin: .125rem 3.25rem .25rem 1.25rem; } .dk-hand { height: 5.25rem; } .dk-hand .pc { --w: 3rem; --h: 4.2rem; } .dk-bar { min-height: 2.5rem; padding: 0 1rem .125rem; } .dk-bar .btn { height: 2.125rem; min-width: 5.5rem; font-size: .9375rem; } .dk-say { padding-top: .125rem; padding-bottom: calc(.375rem + var(--safe-bottom)); } .dk-say .emo { width: 1.875rem; height: 1.875rem; font-size: 1.125rem; } .dk-say input, .dk-say .go { height: 1.875rem; } .dk-mid { min-height: 3.5rem; } } @media (max-height: 600px) { .dk-log { max-height: 1.9rem; } .dk-opps .opp .cards { display: none; } .dk-opps { min-height: 3.75rem; } .dk-hand { height: 4.75rem; } .dk-hand .pc { --w: 2.7rem; --h: 3.8rem; } } /* «+N» on a seat: a small tag by the avatar, not over the name */ .dk-opps .opp .dk-plus { left: auto; right: .1rem; top: .1rem; transform: none; animation: plus-tag 1.2s ease both; } @keyframes plus-tag { 0% { opacity: 0; transform: scale(.6); } 20% { opacity: 1; transform: scale(1.1); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: translateY(-.5rem); } } /* the opening deal: each card comes in from the stock's side, one after another, full size, no ghosts */ .dk-hand.dealing .pc { animation: pc-dealt .5s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--i, 0) * 70ms); } @keyframes pc-dealt { 0% { transform: translate(-45vw, -30vh) rotate(-20deg) scale(.9); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(0, 0) rotate(var(--rot, 0)) scale(1); opacity: 1; } } .dk-opps .opp .role.take { background: rgba(255, 107, 107, .9); color: #fff; font-weight: 700; } /* watching: the clock keeps a margin from the screen's bottom edge; the seconds never leave the screen */ .dk-table.watching .dk-timer { margin-bottom: calc(1.5rem + var(--safe-bottom)); } .dk-table.watching .dk-status { padding-bottom: .625rem; } .dk-timer { margin-right: 3.75rem; } .dk-timer b { right: -3.4rem; min-width: 3rem; } /* «Бито» lives in the status line and the bar, not over the table */ .dk-status.bito { color: var(--dk-gold); font-weight: 800; letter-spacing: .02em; animation: bito-pop .3s cubic-bezier(.34, 1.56, .64, 1) both; } @keyframes bito-pop { from { transform: scale(.85); opacity: .4; } to { transform: none; opacity: 1; } } .dk-timer.bito i { transform: scaleX(1) !important; background: var(--dk-gold); opacity: .9; transition: none; } .dk-round { display: none !important; } /* the opening deal: a short rise into place, so a tap lands on the card at once */ .dk-hand.dealing .pc { animation: pc-dealt .32s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--i, 0) * 40ms); } @keyframes pc-dealt { 0% { transform: translateY(1.5rem) rotate(var(--rot, 0)); opacity: 0; } 100% { transform: translateY(0) rotate(var(--rot, 0)); opacity: 1; } } /* «Бито ✓» on the pile: appears as the last card lands, stays until the next move opens */ .dk-tick { width: auto; height: auto; padding: .22rem .6rem; border-radius: 1rem; font-size: .8125rem; font-weight: 800; white-space: nowrap; top: 50%; animation: tick-pop .35s cubic-bezier(.34, 1.56, .64, 1) both; } @keyframes tick-pop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.5); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } } /* playable cards keep their row: the gold rim marks them, nothing rises or drops when the move passes on */ /* a line of explanation under a list title */ .fnote { margin: -.25rem .25rem .75rem; font-size: .8125rem; line-height: 1.35; color: var(--muted, #8e8e93); } /* the result screen: who already asked for another game */ .dk-over .readyline { margin: .5rem 0 -.25rem; font-size: .8125rem; line-height: 1.35; color: var(--color-text-secondary); text-align: center; } /* «Вільних столів нема» takes a line, not a screen: the games under way are seen at once */ .dk-empty { display: grid; grid-template-columns: auto 1fr; column-gap: .75rem; row-gap: .1rem; align-items: center; text-align: left; padding: .75rem .875rem; } .dk-empty .mark { grid-row: span 2; font-size: 1.75rem; margin: 0; } .dk-empty b { font-size: .9375rem; } .dk-empty span { font-size: .8125rem; line-height: 1.35; max-width: none; } /* Android WebView (a screenshot of 2026-09-25): black rectangles inside the hub cards with only the coloured corners left — a GPU compositing fault when a rounded, overflow-hidden card clips an endlessly animated layer. The halo no longer animates, and every card and every little art card gets its own compositing layer, so the rounded clip is applied to one flat surface. */ .hub-card { isolation: isolate; transform: translateZ(0); backface-visibility: hidden; } .hub-card .glow { animation: none; transform: translate(-50%, -50%); } .hub-card .art.flirt .fc, .hub-card .art.durak .pc { backface-visibility: hidden; } .dk-promo { isolation: isolate; transform: translateZ(0); } /* ---- «Моя стіна» 2026-09-27: two feeds and a pill, compact heads, the wall on the chat's ground, reactions ---- */ .wall-chat .feedsub { position: absolute; top: 3.5rem; left: .75rem; right: .75rem; z-index: 5; display: flex; align-items: center; justify-content: flex-end; gap: .5rem; pointer-events: none; transition: opacity .18s ease; } .wall-chat .feedsub > * { pointer-events: auto; } .wall-chat .feedsub .note { flex: 1; min-width: 0; height: 1.875rem; line-height: 1.875rem; padding: 0 .625rem; border-radius: 1rem; background: rgba(0, 0, 0, .34); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: rgba(255, 255, 255, .92); font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); } .wall-chat .feedsub .w2 { display: inline-flex; align-items: center; gap: .375rem; height: 1.875rem; padding: 0 .75rem 0 .625rem; border-radius: 1rem; background: rgba(0, 0, 0, .34); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #fff; font-size: .8125rem; font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); position: relative; overflow: hidden; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .22); flex: none; } .wall-chat .feedsub .w2 svg { width: 1rem; height: 1rem; } .wall-chat .feedsub .w2.on { background: var(--color-primary); box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .25); } .wall-chat.asking .feedsub { display: none; } body.ctx-open .wall-chat .feedsub { opacity: 0; pointer-events: none; } /* my card, tighter */ .ask-mine { padding: .5rem .5rem .5rem .625rem; gap: .5rem; margin-top: .375rem; } .ask-mine .avatar { width: 2.5rem; height: 2.5rem; font-size: 1.125rem; } .ask-ib { width: 2rem; height: 2rem; border-radius: .625rem; } .ask-ib svg { width: 1rem; height: 1rem; } /* someone's head: the face left, who it is right, the line under both */ .ask-top { padding: .75rem .875rem .75rem; align-items: stretch; text-align: left; } .ask-top .head { display: flex; align-items: center; gap: .75rem; width: 100%; } .ask-top .avatar.hero { width: 4rem; height: 4rem; font-size: 1.75rem; flex: none; } .ask-top .t { flex: 1; min-width: 0; } .ask-top .t b { display: block; margin: 0; font-size: 1.125rem; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ask-top .t .sub { margin-top: .0625rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ask-top .t .ask-views { margin-top: .375rem; } .ask-top .line { max-width: none; margin-top: .5rem; text-align: left; } .ask-top .ask-tiles { margin-top: .625rem; } /* the wall on the chat's ground: the pane in the tab and the block on someone's page */ .wall-chat.asking.onwall .chat-bg { display: block; } .wall-chat .wask.onwall { background: transparent; } .ask-wallbg { position: relative; padding: .5rem 0 1rem; } /* a screen on the chat's ground: the ground under everything, the header and the scroll over it */ .layer.grounded > .chat-bg { z-index: 0; } .layer.grounded > .hdr { position: relative; z-index: 3; } .layer.grounded > .scroll { position: relative; z-index: 1; overscroll-behavior: none; } .layer.grounded > .ask-top { position: absolute; left: 0; right: 0; z-index: 2; will-change: transform; transition: transform .32s cubic-bezier(.32, .72, 0, 1); } /* the head, smaller (2026-09-27): the tiles lower, the face smaller */ .ask-top { padding: .625rem .875rem .625rem; } .ask-top .avatar.hero { width: 3.5rem; height: 3.5rem; font-size: 1.5rem; } .ask-top .line { margin-top: .375rem; font-size: .875rem; display: block; -webkit-line-clamp: none; overflow: visible; white-space: pre-wrap; } /* the whole line (≤100 chars), no two-line cut (2026-09-27) */ .ask-top .ask-tiles { margin-top: .5rem; gap: .375rem; } .ask-tiles .tile { height: 2.125rem; border-radius: .625rem; gap: .375rem; } .ask-tiles .tile svg { width: 1rem; height: 1rem; } .ask-tiles .tile span { font-size: .8125rem; } /* the rating pill */ .ask-rate { display: inline-flex; align-items: center; gap: .25rem; height: 1.625rem; padding: 0 .625rem 0 .375rem; border-radius: .8125rem; background: rgba(18, 14, 38, .62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .22), 0 .25rem .75rem rgba(0, 0, 0, .25); color: #fff; font-size: .8125rem; font-weight: 700; white-space: nowrap; position: relative; overflow: hidden; vertical-align: middle; } .ask-rate .flame { width: 1.125rem; height: 1.125rem; flex: none; filter: drop-shadow(0 0 .25rem rgba(255, 150, 40, .55)); } .ask-rate.top .flame { animation: flame-breathe 1.8s ease-in-out infinite; } @keyframes flame-breathe { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 .25rem rgba(255, 150, 40, .55)); } 50% { transform: scale(1.12); filter: drop-shadow(0 0 .5rem rgba(255, 170, 60, .9)); } } .ask-rate b { font-weight: 800; font-variant-numeric: tabular-nums; } .ask-rate .rk { opacity: .85; font-weight: 600; } .ask-rate.small { height: 1.375rem; padding: 0 .5rem 0 .25rem; font-size: .75rem; margin: 0 0 0 auto; flex: none; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .18); } .ask-rate.small .flame { width: 1rem; height: 1rem; } .ask-rate.small .rk { display: none; } .ask-rate.top { box-shadow: inset 0 0 0 1px rgba(255, 190, 80, .75), 0 0 .75rem rgba(255, 160, 40, .45); } /* in the corner: of my card and of someone's head */ .ask-mine > .ask-rate.corner.corner { position: absolute; top: .4375rem; right: .5rem; height: 1.375rem; font-size: .75rem; } .ask-mine > .ask-rate.corner .flame { width: 1rem; height: 1rem; } .ask-mine { min-height: 4.5rem; align-items: center; } .ask-mine .ask-ibs { align-self: flex-end; margin-top: 1.5rem; } .ask-top > .ask-rate.corner.corner { position: absolute; top: .5rem; right: .75rem; z-index: 3; } .ask-top .head { padding-right: 6.5rem; } /* the first look: a ghost head and ghost bubbles while the wall loads, the records fading in after */ .ask-top.loading .ask-tiles { opacity: .55; pointer-events: none; } .ask-top.ghost .avatar.hero, .ask-top .bar, .ask-wallbg.ghost .qb, .ask-wallbg.ghost .ab, .ask-wallbg.ghost .avatar, .ask-wallbg .bar { animation: ghost-breathe 1.4s ease-in-out infinite; } .ask-top.ghost .avatar.hero { background: rgba(127, 127, 140, .35); color: transparent; box-shadow: none; } .ask-top .bar { display: block; height: .75rem; border-radius: .375rem; background: rgba(127, 127, 140, .32); margin: .25rem 0; } .ask-top .bar.w60 { width: 60%; height: 1rem; } .ask-top .bar.w40 { width: 40%; } .ask-top .bar.pill { width: 6rem; height: 1.5rem; border-radius: .75rem; margin-top: .5rem; } .ask-top .bar.line { width: 100%; margin-top: .625rem; } .ask-top .bar.line.w70 { width: 70%; margin-top: .375rem; } .ask-wallbg.ghost { pointer-events: none; } .ask-wallbg .bar.title { display: block; width: 4.5rem; height: .8125rem; border-radius: .4rem; margin: .25rem .75rem .75rem; background: rgba(255, 255, 255, .25); } .ask-wallbg.ghost .qb, .ask-wallbg.ghost .ab { height: 2.5rem; box-shadow: none; } .ask-wallbg.ghost .qb { background: rgba(255, 255, 255, .22); } .ask-wallbg.ghost .ab { background: rgba(139, 124, 255, .45); } .ask-wallbg.ghost .avatar { background: rgba(255, 255, 255, .18); color: transparent; } .ask-wallbg.ghost .ask-it:nth-child(3) { opacity: .75; } .ask-wallbg.ghost .ask-it:nth-child(4) { opacity: .5; } @keyframes ghost-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } } .ask-wallbg.fresh .ask-it { animation: ghost-in .16s ease-out both; } /* one soft appearance, no queue (2026-09-28) */ @keyframes ghost-in { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: none; } } /* the head folds as the wall scrolls (2026-09-27, transforms only): the whole head slides up by --fold, its row and the rating slide back down by the same, the face scales, the line / views / tiles fade */ /* v2 (2026-10-02, the user: «плавнее»): the fold follows the scroll — --p is how far in it is, 0…1, set by the scroll handler; registered so a change glides over 120 ms instead of stepping with each scroll event; the folded class only keeps the finger off the faded parts and pins --p at 1 when the field holds the head up */ @property --p { syntax: ""; inherits: true; initial-value: 0; } .ask-top { --p: 0; transition: --p .2s cubic-bezier(.25, .6, .3, 1); transform: translateY(calc(-1 * var(--fold, 0px) * var(--p))); } .ask-top.folded { --p: 1; } .ask-top .head, .ask-top > .ask-rate.corner.corner { transform: translateY(calc(var(--fold, 0px) * var(--p))); will-change: transform; } .ask-top .avatar.hero { transform-origin: left center; transform: scale(calc(1 - .36 * var(--p))); transition: box-shadow .32s; will-change: transform; } .ask-top.folded .avatar.hero { box-shadow: 0 0 0 .1875rem rgba(255, 255, 255, .7); } .ask-top .t { transform: translateX(calc(-1.25rem * var(--p))); will-change: transform; } .ask-top .meta { margin-top: .375rem; } .ask-top .meta, .ask-top .line, .ask-top .ask-tiles, .ask-top .ask-blocked { opacity: calc(1 - var(--p) * 1.8); } .ask-top.folded .meta, .ask-top.folded .line, .ask-top.folded .ask-tiles, .ask-top.folded .ask-blocked { pointer-events: none; } /* the picture and its veil stay put on the screen while the head slides up over them (2026-10-02, the user: «сзади меняется положение фона»): the same shift back */ .ask-top .bg { inset: auto; top: calc(-4rem - var(--fold, 0px)); left: -15%; right: -15%; height: calc(26rem + var(--fold, 0px)); will-change: transform; transform: translateY(calc(var(--fold, 0px) * var(--p))) scale(1.1); } /* taller by the fold: shifted back it must still reach the top edge (the user: «отрывается от шапки») */ .ask-top .ask-tiles.three { opacity: 1; } /* the three tiles never fade: they travel (flipTiles) */ .ask-top .ask-tiles.three .tile { will-change: transform; transform-origin: 50% 50%; } .ask-top > .ask-rate.corner.corner { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(18, 14, 38, .78); } .ask-top.pic .ask-tiles .tile { backdrop-filter: none; -webkit-backdrop-filter: none; } /* (2026-09-27) no will-change on the wall's scroll box: with it iOS WebKit leaves the box blank under a fast scroll and after a programmatic one — the wall came up empty or in pieces */ .ask-card .title .medal { font-size: 1rem; line-height: 1; margin-right: .25rem; } .ask-top.pic .ask-rate { box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .3); } .wall-chat .wask { overscroll-behavior: none; } .layer.grounded .ask-top { box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .18); } .layer.grounded .empty { color: rgba(255, 255, 255, .8); text-shadow: 0 1px 2px rgba(0, 0, 0, .3); } .layer.grounded .empty .strong { color: #fff; } .ask-wallbg .group-title { color: rgba(255, 255, 255, .85); text-shadow: 0 1px 2px rgba(0, 0, 0, .3); } .wask.onwall .ask-tabs { background: rgba(0, 0, 0, .34); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .wask.onwall .ask-tabs button { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); } .wask.onwall .ask-tabs button.on { color: #000; text-shadow: none; box-shadow: 0 3px 10px rgba(0, 0, 0, .18), 0 1px 1px rgba(0, 0, 0, .06); } .wask.onwall .empty { color: rgba(255, 255, 255, .8); text-shadow: 0 1px 2px rgba(0, 0, 0, .3); } .wask.onwall .empty .strong { color: #fff; } .ask-write { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: .25rem .75rem .625rem; width: calc(100% - 1.5rem); height: 2.5rem; border-radius: 1.25rem; background: var(--color-background); color: var(--color-primary); font-size: .9375rem; font-weight: 600; box-shadow: var(--shadow-island); position: relative; overflow: hidden; } .ask-write svg { width: 1.125rem; height: 1.125rem; } /* one thing on the wall: bubbles, no box */ .ask-it { margin: 0 .75rem .75rem; } .ask-it .qrow, .ask-it .arow { display: flex; align-items: flex-end; gap: .375rem; } .ask-it .arow { justify-content: flex-end; margin-top: .25rem; } .ask-it .avatar { width: 1.75rem; height: 1.75rem; font-size: .875rem; flex: none; } .ask-it .avatar.mask { background: linear-gradient(135deg, #6b6b78, #3a3a44); } .ask-it .avatar.own { background: linear-gradient(135deg, #8b7cff, #5a3fd6); } .ask-it .qb, .ask-it .ab { position: relative; max-width: 84%; padding: .4375rem .625rem .3125rem; font-size: .9375rem; line-height: 1.35; -webkit-user-select: none; user-select: none; } .ask-it .tx { white-space: pre-wrap; word-break: break-word; } .ask-it .qb { border-radius: 1rem 1rem 1rem .25rem; background: var(--color-background); color: var(--color-text); box-shadow: 0 1px 1px rgba(0, 0, 0, .1); } .ask-it .ab { border-radius: 1rem 1rem .25rem 1rem; background: linear-gradient(135deg, #8b7cff, #5a3fd6); color: #fff; box-shadow: 0 .25rem .75rem rgba(90, 63, 214, .28); } .ask-it .qb b, .ask-it .ab b { display: block; font-size: .6875rem; font-weight: 700; margin-bottom: .0625rem; opacity: .75; } .ask-it .qb b { color: var(--color-primary); opacity: 1; } .ask-it .foot { display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem; margin-top: .1875rem; min-height: .875rem; } .ask-it .reacts { display: flex; flex-wrap: wrap; gap: .25rem; } .ask-it .reacts:empty { display: none; } .ask-it .rc { display: inline-flex; align-items: center; gap: .25rem; height: 1.5rem; padding: 0 .5rem 0 .375rem; border-radius: .75rem; font-size: .75rem; font-weight: 600; background: rgba(255, 255, 255, .2); color: #fff; position: relative; overflow: hidden; margin-top: .25rem; } .ask-it .rc .e { font-size: .875rem; line-height: 1; } .ask-it .rc.own { background: #fff; color: #5a3fd6; } .ask-it .rc.pop { animation: ask-pop .38s cubic-bezier(.2, .8, .2, 1); } .ask-it time { margin-left: auto; font-size: .625rem; color: rgba(255, 255, 255, .75); white-space: nowrap; align-self: flex-end; } .ask-it.gone { animation: card-gone .3s ease-in forwards; pointer-events: none; } /* the reactions over a held thing */ .ctx-react { position: fixed; z-index: 2; display: flex; gap: .125rem; padding: .25rem; border-radius: 1.5rem; background: color-mix(in srgb, var(--color-background) 88%, transparent); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .28), 0 0 0 .5px rgba(0, 0, 0, .08); opacity: 0; transform: scale(.6); transform-origin: bottom left; transition: opacity .18s ease, transform .22s cubic-bezier(.32, .72, 0, 1); } .ctx-root.open .ctx-react { opacity: 1; transform: scale(1); } .ctx-react .re { width: 2.625rem; height: 2.375rem; border-radius: 1.25rem; font-size: 1.5rem; line-height: 1; display: grid; place-items: center; transition: transform .12s ease, background .12s ease; } .ctx-react .re:active { transform: scale(1.3); } .ctx-react .re.on { background: var(--color-primary-tint); } /* «Хочу таку саму стіну» over the wall (2026-09-27) */ .ask-cta { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: .5rem; margin: .625rem .75rem .125rem; width: calc(100% - 1.5rem); height: 2.75rem; border-radius: 1.375rem; color: #fff; font-size: .9375rem; font-weight: 700; background: radial-gradient(120% 120% at 100% 0%, #8b7cff 0%, #5a3fd6 45%, #2a1c6e 100%); box-shadow: 0 .5rem 1.25rem rgba(42, 28, 110, .35), inset 0 0 0 .5px rgba(255, 255, 255, .25); } .ask-cta::before { content: ""; position: absolute; inset: 0; background: url("pattern.svg") center / 22rem; opacity: .07; pointer-events: none; } .ask-cta::after { content: ""; position: absolute; top: -50%; left: -60%; width: 40%; height: 200%; background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .32), transparent); transform: skewX(-20deg); animation: cta-shine 3.6s ease-in-out infinite; pointer-events: none; } @keyframes cta-shine { 0%, 55% { left: -60%; } 100% { left: 140%; } } .ask-cta svg { width: 1.125rem; height: 1.125rem; position: relative; flex: none; } .ask-cta span { position: relative; } .ask-cta svg:nth-of-type(2) { width: 1rem; height: 1rem; opacity: .7; margin-left: -.125rem; } /* nth-of-type, not last-child: the ripple wave appended on a tap made the chevron «not last» and the text re-centred (2026-09-27) */ .ask-cta:active { transform: scale(.98); } .ask-views { position: relative; overflow: hidden; cursor: pointer; } .ask-views:active { opacity: .75; } /* «Моя стіна»: one block on top — the feed switch, my card, the capsule (2026-09-27) */ .wall-chat .wask { padding-top: .5rem; } .ask-panel { position: relative; margin: 0 .75rem .5rem; padding: .375rem; border-radius: 1.125rem; background: color-mix(in srgb, var(--color-background) 90%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: var(--shadow-island); } .ask-panel > .feedseg.inpanel { position: static; margin: 0 0 .375rem; width: auto; left: auto; right: auto; top: auto; transform: none; } .ask-panel .feedseg button, .wask.onwall .ask-panel .ask-tabs button { color: var(--color-text); text-shadow: none; } .ask-panel .feedseg button.on, .wask.onwall .ask-panel .ask-tabs button.on { color: #000; box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 3px 1px rgba(0, 0, 0, .04); } :root[data-theme="dark"] .ask-panel .feedseg button.on, :root[data-theme="dark"] .wask.onwall .ask-panel .ask-tabs button.on { color: #fff; } .wask.onwall .ask-panel .ask-tabs { background: rgba(118, 118, 128, .12); backdrop-filter: none; -webkit-backdrop-filter: none; } :root[data-theme="dark"] .wask.onwall .ask-panel .ask-tabs { background: rgba(118, 118, 128, .24); } .ask-panel .ask-mine { margin: 0 0 .375rem; border-radius: .875rem; } .ask-panel .ask-tabs { margin: 0; } /* the write bar over my wall, the channel's twin */ .wall-write.askw { display: none; } /* only over my own wall; on the channel it hid the channel's bar (2026-09-27) */ .wall-chat.asking.onwall.mine .wall-write.askw { display: flex; } .wall-chat.asking.onwall.mine .wask { padding-bottom: calc(var(--tabbar-space) + 5rem); } body.ctx-open .wall-write.askw { opacity: 0; pointer-events: none; } /* the top of «Стіни» without a box (2026-09-27): the switch, the card and the capsule float on the ground, all lower */ .ask-panel { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; padding: 0; margin: 0 .75rem .5rem; } .ask-panel > .feedseg.inpanel { margin: 0 0 .5rem; } .ask-panel .ask-mine { margin: 0 0 .5rem; border-radius: 1rem; } .wall-chat .feedseg { padding: .125rem; border-radius: .6875rem; } .wall-chat .feedseg button { height: 1.875rem; border-radius: .5625rem; font-size: .8125rem; } .wall-chat .feedsub { top: 3rem; } .wall-chat.with-seg .wmsgs > .wcol { padding-top: 3.25rem; } .wall-chat.with-seg.noted .wmsgs > .wcol { padding-top: 5.5rem; } .ask-panel .ask-tabs { padding: .125rem; border-radius: .6875rem; } .ask-panel .ask-tabs button { height: 1.75rem; border-radius: .5625rem; font-size: .75rem; } .wask.onwall .ask-panel .feedseg, .wask.onwall .ask-panel .ask-tabs { background: rgba(0, 0, 0, .34); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .wask.onwall .ask-panel .feedseg button, .wask.onwall .ask-panel .ask-tabs button { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); } .wask.onwall .ask-panel .feedseg button.on, .wask.onwall .ask-panel .ask-tabs button.on { color: #000; text-shadow: none; box-shadow: 0 3px 10px rgba(0, 0, 0, .18), 0 1px 1px rgba(0, 0, 0, .06); } :root[data-theme="dark"] .wask.onwall .ask-panel .feedseg button.on, :root[data-theme="dark"] .wask.onwall .ask-panel .ask-tabs button.on { color: #fff; } .wask.onwall .ask-panel .ask-tabs button.on .n { background: #fff; color: var(--color-primary); } /* the head without a picture (2026-09-27): the avatar's own colour, blurred, behind it */ .ask-top .bg.tone { background: linear-gradient(135deg, var(--av-a), var(--av-b)); filter: blur(28px) saturate(1.2); } .ask-top .bg.tone.c1 { --av-a: #ff885e; --av-b: #ff516a; } .ask-top .bg.tone.c2 { --av-a: #ffcd6a; --av-b: #ffa85c; } .ask-top .bg.tone.c3 { --av-a: #82b1ff; --av-b: #665fff; } .ask-top .bg.tone.c4 { --av-a: #a0de7e; --av-b: #54cb68; } .ask-top .bg.tone.c5 { --av-a: #53edd6; --av-b: #28c9b7; } .ask-top .bg.tone.c6 { --av-a: #72d5fd; --av-b: #2a9ef1; } .ask-top .bg.tone.c7 { --av-a: #e0a2f3; --av-b: #d669ed; } /* my card in the section is that head */ .ask-panel .ask-top { border-radius: 1rem; overflow: hidden; margin: 0 0 .5rem; box-shadow: var(--shadow-island); } .ask-panel .ask-top .head { padding-right: 6.5rem; } .ask-top.off .avatar.hero { filter: grayscale(1); } .ask-top.off .t .sub { color: #ffb4b4; } /* the letter sits in the middle of the big face (2026-09-27): the base avatar centres by line-height, the hero is taller than that */ .ask-top .avatar.hero { display: grid; place-items: center; line-height: 1; padding: 0; } .ask-top .avatar.hero img { width: 100%; height: 100%; object-fit: cover; } /* the ring around the face, softer (2026-09-27): a little see-through, on every head */ .ask-top .avatar.hero { box-shadow: 0 0 0 .1875rem rgba(255, 255, 255, .4), 0 .5rem 1.5rem rgba(0, 0, 0, .3); } .ask-top.folded .avatar.hero { box-shadow: 0 0 0 .1875rem rgba(255, 255, 255, .35); } /* reactions on a line of a conversation (2026-09-27) */ .msg .bubble .dmr { display: flex; flex-wrap: wrap; gap: .25rem; padding: .25rem 0 .125rem; } .msg .bubble .dmr[hidden] { display: none; } .msg .bubble .dmr .rc { display: inline-flex; align-items: center; gap: .25rem; height: 1.5rem; padding: 0 .5rem 0 .375rem; border-radius: .75rem; font-size: .75rem; font-weight: 600; background: var(--color-primary-tint); color: var(--color-primary); position: relative; overflow: hidden; } .msg .bubble .dmr .rc .e { font-size: .875rem; line-height: 1; } .msg .bubble .dmr .rc.own { background: var(--color-primary); color: #fff; } .msg.own .bubble .dmr .rc { background: rgba(255, 255, 255, .22); color: #fff; } .msg.own .bubble .dmr .rc.own { background: #fff; color: var(--color-primary); } /* the note from the top (2026-09-27) */ .push-note { position: fixed; top: calc(var(--safe-top) + .5rem); left: .75rem; right: .75rem; z-index: 1600; display: flex; align-items: center; gap: .75rem; padding: .625rem .875rem; border-radius: 1.125rem; background: color-mix(in srgb, var(--color-background) 86%, transparent); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .28), 0 0 0 .5px rgba(0, 0, 0, .08); transform: translateY(calc(-100% - 1.5rem)); opacity: 0; transition: transform .38s cubic-bezier(.2, .8, .2, 1), opacity .25s ease; cursor: pointer; } .push-note.open { transform: none; opacity: 1; } .push-note .pi { width: 2.5rem; height: 2.5rem; border-radius: .875rem; flex: none; display: grid; place-items: center; font-size: 1.375rem; background: linear-gradient(135deg, #8b7cff, #5a3fd6); color: #fff; box-shadow: 0 .25rem .75rem rgba(90, 63, 214, .35); } .push-note .pi svg { width: 1.375rem; height: 1.375rem; } .push-note .pt { flex: 1; min-width: 0; line-height: 1.25; } .push-note .pt b { display: block; font-size: .9375rem; font-weight: 700; color: var(--color-text); } .push-note .pt span { display: block; font-size: .8125rem; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* the capsules on a question card */ .acard.askq .actions { display: flex; gap: .5rem; margin-top: .625rem; align-items: center; } .acard.askq .actions .pill.primary { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 2.5rem; border-radius: 1.25rem; padding: 0 1rem; background: linear-gradient(135deg, #8b7cff, #5a3fd6); color: #fff; font-size: .9375rem; font-weight: 700; box-shadow: 0 .375rem 1rem rgba(90, 63, 214, .3); position: relative; overflow: hidden; } .acard.askq .actions .pill.primary svg { width: 1.125rem; height: 1.125rem; } .acard.askq .actions .pill.round { width: 2.5rem; height: 2.5rem; border-radius: 50%; padding: 0; display: grid; place-items: center; background: var(--color-background-secondary); color: var(--color-text-secondary); flex: none; } .acard.askq .actions .pill.round svg { width: 1.25rem; height: 1.25rem; } .acard.askq.in { animation: ghost-in .38s cubic-bezier(.2, .8, .2, 1) both; } /* twenty reactions: the bar scrolls sideways, no scrollbar, a fade at the far end (2026-09-27) */ .ctx-react { overflow-x: auto; overflow-y: hidden; box-sizing: border-box; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent); } .ctx-react::-webkit-scrollbar { display: none; } .ctx-react .re { flex: none; scroll-snap-align: start; } /* a line leaving (2026-09-27) */ .msg.gone { overflow: hidden; opacity: 0; transform: scale(.82); margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; pointer-events: none; transition: opacity .22s ease, transform .3s cubic-bezier(.4, 0, .2, 1), height .32s cubic-bezier(.4, 0, .2, 1), margin .32s cubic-bezier(.4, 0, .2, 1), padding .32s cubic-bezier(.4, 0, .2, 1); } /* the chips keep clear of the time in the corner (2026-09-27) */ .msg .bubble .dmr { padding-right: 3.25rem; } .msg.own .bubble .dmr { padding-right: 4.25rem; } /* the dust of a deleted line (2026-09-27) */ .boom { position: fixed; z-index: 1700; pointer-events: none; overflow: visible; } .boom i { position: absolute; width: .5rem; height: .5rem; margin: -.25rem 0 0 -.25rem; border-radius: 50%; opacity: 0; transform: scale(var(--s, 1)); box-shadow: 0 0 .375rem currentColor; animation: boom 2s cubic-bezier(.16, .62, .3, 1) forwards; will-change: transform, opacity; } @keyframes boom { 0% { opacity: 0; transform: translate(0, 0) scale(var(--s, 1)) rotate(0deg); } 8% { opacity: 1; } 45% { opacity: .95; transform: translate(var(--dx), var(--dy)) scale(calc(var(--s, 1) * 1.1)) rotate(var(--rot, 0deg)); } 100% { opacity: 0; transform: translate(calc(var(--dx) * 1.15), calc(var(--dy) + var(--fall, 50px))) scale(0) rotate(calc(var(--rot, 0deg) * 1.5)); } } .msg.gone { transition-duration: .45s, .6s, .5s, .5s, .5s; transition-delay: .1s, 0s, .25s, .25s, .25s; } /* a conversation loading: ghost bubbles instead of a spinner (2026-09-27) */ .chat-load.ghost { flex-direction: column; align-items: stretch; justify-content: flex-end; gap: .5rem; padding: 0 .75rem calc(var(--composer-reserve, 4.5rem) + .75rem); } .chat-load.ghost .gmsg { display: flex; width: 100%; } .chat-load.ghost .gmsg.own { justify-content: flex-end; } .chat-load.ghost .gb { height: 2.625rem; border-radius: 1.125rem; background: rgba(255, 255, 255, .24); animation: ghost-breathe 1.4s ease-in-out infinite; } .chat-load.ghost .gmsg.own .gb { background: rgba(51, 144, 236, .48); } :root[data-theme="dark"] .chat-load.ghost .gb { background: rgba(255, 255, 255, .14); } :root[data-theme="dark"] .chat-load.ghost .gmsg.own .gb { background: rgba(51, 144, 236, .4); } .chat-load.ghost .gmsg:nth-child(2) .gb { animation-delay: .12s; } .chat-load.ghost .gmsg:nth-child(3) .gb { animation-delay: .24s; } .chat-load.ghost .gmsg:nth-child(4) .gb { animation-delay: .36s; } .chat-load.ghost .gmsg:nth-child(5) .gb { animation-delay: .48s; } .chat-load.ghost .gmsg:nth-child(6) .gb { animation-delay: .6s; } .chat-load.ghost .gmsg:nth-child(1) { opacity: .45; } .chat-load.ghost .gmsg:nth-child(2) { opacity: .6; } .chat-load.ghost .gmsg:nth-child(3) { opacity: .75; } .chat-load.ghost .gmsg:nth-child(4) { opacity: .85; } /* the ground as one bitmap, and the spare one waiting (2026-09-27) */ .chat-bg canvas.ground { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .chat-bg.img { background-size: 100% auto; background-repeat: no-repeat; background-position: 0 0; } /* the ground as one shared picture (2026-09-27): the composed bitmap, width-fitted, kept in aspect */ .ground-pool { position: fixed; left: 0; top: 0; width: 100%; height: 100%; opacity: .01; pointer-events: none; z-index: 0; } .ground-pool .chat-bg { position: absolute; inset: 0; } /* the ghosts wait a quarter of a second before showing (2026-09-27): a fast answer means no flash of placeholders at all */ .chat-load.ghost { opacity: 0; animation: ghost-appear .22s ease .25s forwards; } .chat-load.ghost.gone { animation: none; opacity: 0; } .ask-top.ghost, .ask-wallbg.ghost { opacity: 0; animation: ghost-appear .22s ease .25s forwards; } @keyframes ghost-appear { to { opacity: 1; } } /* an empty wall (2026-09-27) */ .ask-wallbg.none { min-height: 55vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1.5rem; } .wall-none { text-align: center; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .35); max-width: 20rem; animation: ghost-in .4s cubic-bezier(.2, .8, .2, 1) both; } .wall-none .mark { font-size: 3rem; line-height: 1; margin-bottom: .75rem; filter: drop-shadow(0 .25rem .75rem rgba(0, 0, 0, .3)); } .wall-none b { display: block; font-size: 1.125rem; font-weight: 700; margin-bottom: .375rem; } .wall-none span { display: block; font-size: .9375rem; line-height: 1.35; opacity: .85; } .wall-none .wall-ask { display: inline-flex; align-items: center; gap: .375rem; margin-top: .875rem; height: 2.125rem; padding: 0 .875rem 0 .75rem; border-radius: 1.0625rem; background: rgba(255, 255, 255, .94); color: var(--color-primary); font-size: .875rem; font-weight: 700; box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .25); position: relative; overflow: hidden; text-shadow: none; } .wall-none .wall-ask svg { width: 1rem; height: 1rem; } .wall-none .wall-ask:active { transform: scale(.97); } /* the write sheet, glass (2026-09-27): who writes and where is spelled out, the subtitle wraps, it fades as it slides */ .qsheet { background: color-mix(in srgb, var(--color-background) 76%, transparent); -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%); border-radius: 1.5rem 1.5rem 0 0; box-shadow: 0 -.5rem 2rem rgba(0, 0, 0, .28), inset 0 .5px 0 rgba(255, 255, 255, .35); transition: transform var(--layer-transition), opacity .22s ease; opacity: 0; } .sheet-root.open .qsheet { opacity: 1; } .qsheet .qhead .t span { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; } .qsheet .qwho { display: flex; align-items: center; gap: .375rem; flex-wrap: wrap; margin: -.125rem 0 .625rem; } .qsheet .qwho .chip { display: inline-flex; align-items: center; height: 1.75rem; padding: 0 .625rem; border-radius: .875rem; font-size: .8125rem; font-weight: 600; background: rgba(127, 127, 140, .16); color: var(--color-text); white-space: nowrap; } .qsheet .qwho .chip.me { background: linear-gradient(135deg, #6b6b78, #3a3a44); color: #fff; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .2); } .qsheet .qwho .chip.me.own { background: linear-gradient(135deg, #8b7cff, #5a3fd6); } .qsheet .qwho .arrow { color: var(--color-text-secondary); font-size: .9375rem; } .qsheet textarea { background: rgba(127, 127, 140, .14); } .qsheet .qx { background: rgba(127, 127, 140, .18); } /* the sheet's glass only once it has landed (2026-09-27): a backdrop blur riding with the keyboard stuttered on the iPhone */ .qsheet { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--color-background) 93%, transparent); } /* one look from the first frame to the last: nothing switches once it has landed (2026-09-27) */ /* the capsule never wraps or shrinks under the finger (2026-09-27) */ .ask-cta { flex-wrap: nowrap; white-space: nowrap; box-sizing: border-box; min-height: 2.75rem; } .ask-cta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ask-cta:active { transform: none; opacity: .88; } .ask-cta .ripple-wave { --ripple-color: rgba(255, 255, 255, .25); } /* the head's ground without filters, v3 (2026-09-27): the colour, then the blurred photo bitmap fading in over it */ .ask-top .bg.tone { filter: none; transform: none; inset: 0; height: auto; will-change: auto; } .ask-top canvas.bg.photo { position: absolute; inset: -4%; width: 108%; height: 108%; filter: none; transform: none; opacity: 0; transition: opacity .25s ease; image-rendering: auto; will-change: auto; } .ask-top canvas.bg.photo.ready { opacity: 1; } /* the head's ground: a tint, no blur (2026-09-27) */ .ask-top .bg.tone { filter: none; transform: none; inset: 0; height: auto; will-change: auto; } .ask-top .veil { background: linear-gradient(180deg, rgba(12, 10, 30, .18) 0%, rgba(12, 10, 30, .42) 100%); } /* the head's colours (2026-09-27) */ .ask-top .bg.tone2 { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; filter: none; transform: none; height: auto; } .ask-top .bg.tone2.on { opacity: 1; } .avatar.hero img.hero-img { opacity: 0; transition: opacity .18s ease; } .avatar.hero img.hero-img.ld { opacity: 1; } .ask-tones { display: flex; flex-wrap: wrap; gap: .5rem; margin: .25rem 0 .625rem; } .ask-tones .tone { width: 2.375rem; height: 2.375rem; border-radius: 50%; position: relative; overflow: hidden; display: grid; place-items: center; color: #fff; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .3); transition: transform .12s ease; } .ask-tones .tone svg { width: 1.125rem; height: 1.125rem; } .ask-tones .tone.on { box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-primary); } .ask-tones .tone:active { transform: scale(.94); } .avatar.hero canvas.hero-img { width: 100%; height: 100%; display: block; border-radius: 50%; } /* the record button while it records (2026-09-27) */ .composer .main.rec { background: #ff3b30; animation: rec-pulse 1.2s ease-in-out infinite; } @keyframes rec-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, .35); } 50% { box-shadow: 0 0 0 .625rem rgba(255, 59, 48, 0); } } .composer .main .i-cam { transform: none; } /* one field, everything inside (2026-09-27): the clip on the left, the words, the microphone/camera in grey on the right, and with words a small blue circle in the very same spot — compact, like Telegram on a phone */ :root { --composer-main: 2.75rem; } .composer .field { padding: 0 .1875rem 0 .25rem; min-height: 2.75rem; border-radius: 1.375rem; } .composer .field .abtn { width: 2.75rem; } .composer .field .abtn svg { width: 1.375rem; height: 1.375rem; } .composer .field .main { width: 2.375rem; height: 2.375rem; margin: .1875rem 0 .1875rem .125rem; align-self: flex-end; flex: none; border-radius: 50%; background: transparent; color: var(--color-text-secondary); box-shadow: none; transition: background .18s ease, color .18s ease, transform .1s ease; } .composer .field .main svg { width: 1.5rem; height: 1.5rem; } .composer .field .main.send { background: var(--color-primary); color: #fff; } .composer .field .main.send svg { width: 1.25rem; height: 1.25rem; } .composer .field .main.rec { background: #ff3b30; color: #fff; } .composer .field .main:active { transform: scale(.92); } .composer textarea { font-size: 1rem; } /* the lock over the record button (2026-09-27): slide up to lock */ .composer .field .rec-lock { position: absolute; right: .375rem; bottom: calc(100% + .5rem); width: 2.25rem; padding: .5rem 0 .375rem; border-radius: 1.125rem; background: color-mix(in srgb, var(--color-background) 90%, transparent); box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .25); display: flex; flex-direction: column; align-items: center; gap: .125rem; font-size: .875rem; color: var(--color-text-secondary); animation: lock-bob 1.1s ease-in-out infinite; pointer-events: none; z-index: 3; } .composer .field .rec-lock .arrow { font-size: .75rem; line-height: 1; } .composer .field .rec-lock.on { animation: none; background: var(--color-primary); color: #fff; } .composer .field .rec-lock.on .arrow { display: none; } @keyframes lock-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.3rem); } } .composer .field .main.locked { background: var(--color-primary); color: #fff; animation: none; } /* the round video while it records (2026-09-27): the preview floats, nothing to press on it */ .circ-rec.hold { background: transparent; pointer-events: none; justify-content: flex-start; padding-top: 12vh; gap: 1rem; } .circ-rec.hold .ring { width: min(62vw, 16rem); height: min(62vw, 16rem); box-shadow: 0 .75rem 2.5rem rgba(0, 0, 0, .5), 0 0 0 4px rgba(255, 255, 255, .35); } .circ-rec.hold .timer { text-shadow: 0 1px 3px rgba(0, 0, 0, .6); } /* the strip leaves the button on the right free */ .composer .field .recbar { inset: 0 2.625rem 0 0; border-radius: 1.375rem 0 0 1.375rem; } /* no voice, no round video for now (2026-09-27): the button shows only when there is something to send; the field sits a little higher */ .composer .field .main:not(.send) { display: none; } .composer .field { padding-right: .375rem; } .composer .field .main.send { margin-right: 0; } .composer-wrap { padding-bottom: calc(1rem + var(--safe-bottom)); } body.keyboard-visible .composer-wrap { padding-bottom: .75rem; } .chat-layer { --composer-reserve: calc(var(--composer-height) + 1.25rem + var(--safe-bottom)); } /* the ground keeps its scale (2026-09-27): a shorter box (the keyboard) crops it at the bottom instead of squeezing the doodles */ .chat-bg canvas.ground { height: auto; min-height: 100%; bottom: auto; } /* the lines and the field move by the same amount when the keyboard comes, and together (2026-09-27): the field's bottom padding loses .25rem + the safe area, so the list's does too, on the same curve */ .msgs > .mcol { transition: padding-bottom 260ms cubic-bezier(.32, .72, 0, 1); } body.keyboard-visible .msgs > .mcol { padding-bottom: calc(var(--composer-height) + 1.5rem); } /* «Дописи» (2026-09-27): the capsule over the channel's posts / wall 2 */ .wall-chat > .wall-seg { position: absolute; top: .5rem; left: .75rem; right: .75rem; z-index: 5; margin: 0; background: rgba(0, 0, 0, .34); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: opacity .2s ease; } .wall-chat > .wall-seg button { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); } .wall-chat > .wall-seg button.on { color: #000; text-shadow: none; box-shadow: 0 3px 10px rgba(0, 0, 0, .18), 0 1px 1px rgba(0, 0, 0, .06); } body.ctx-open .wall-chat > .wall-seg { opacity: 0; pointer-events: none; } .wall-chat.posts .feedsub { justify-content: stretch; } /* «Повідомлення» on top (2026-09-27): the row to write a post, the pinned talk with the team */ .row-item.chat.write-row { padding-right: .75rem; } .row-item.chat.write-row .avatar.write { display: grid; place-items: center; background: linear-gradient(135deg, #3390ec, #1f6fc4); color: #fff; box-shadow: 0 .25rem .75rem rgba(51, 144, 236, .3); } .row-item.chat.write-row .avatar.write svg { width: 1.375rem; height: 1.375rem; stroke-width: 2; } .row-item.chat.write-row .title h3 { color: var(--color-primary); } .row-item.chat.write-row .chev { flex: none; margin-left: .5rem; color: var(--color-text-secondary); opacity: .55; display: grid; place-items: center; } .row-item.chat.write-row .chev svg { width: 1.125rem; height: 1.125rem; } .row-item.chat .title .pin { flex: none; margin-left: .375rem; color: var(--color-text-secondary); opacity: .7; display: inline-grid; place-items: center; } .row-item.chat .title .pin svg { width: .875rem; height: .875rem; } /* «Моя стіна»: the field at the bottom (2026-09-27) — glass over the ground, one writes right here */ .ask-compose { position: absolute; left: .75rem; right: .75rem; bottom: calc(var(--tabbar-space) + .625rem); z-index: 5; display: none; transition: opacity .18s ease, transform .18s ease; } .wall-chat.asking.onwall.mine .ask-compose { display: block; } body.keyboard-visible .ask-compose { bottom: .75rem; } .ask-compose .field { display: flex; align-items: flex-end; min-height: 2.75rem; padding: 0 .375rem 0 .25rem; border-radius: 1.375rem; background: rgba(0, 0, 0, .34); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .18), inset 0 0 0 .5px rgba(255, 255, 255, .18); } .ask-compose textarea { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; resize: none; padding: .6875rem .5rem .6875rem .875rem; font: inherit; font-size: 1rem; line-height: 1.3125; color: #fff; caret-color: #fff; max-height: 120px; } .ask-compose textarea::placeholder { color: rgba(255, 255, 255, .72); } .ask-compose .main { width: 2.375rem; height: 2.375rem; margin: .1875rem 0 .1875rem .125rem; flex: none; border-radius: 50%; display: none; place-items: center; background: var(--color-primary); color: #fff; box-shadow: 0 .25rem .625rem rgba(0, 0, 0, .18); } .ask-compose .main.send { display: grid; animation: pop-in .18s ease-out; } .ask-compose .main svg { width: 1.25rem; height: 1.25rem; } .ask-compose .main:active { transform: scale(.92); } .ask-compose .main:disabled { opacity: .5; } body.ctx-open .ask-compose { opacity: 0; pointer-events: none; transform: translateY(1rem); } /* the line under the name: three lines, then «Більше» (2026-09-27) */ .ask-top .line { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; } .ask-top .line-more { display: inline-block; margin: .125rem 0 0; padding: 0; font-size: .875rem; font-weight: 600; color: var(--color-primary); background: none; } .ask-top .line-more[hidden] { display: none; } .wask.onwall .ask-top .line-more, .ask-top.pic .line-more { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); opacity: .9; } /* a window whose text scrolls inside a box of a fixed size: the rules, a long description */ .modal-dialog.scroll .mtext { height: min(52vh, 24rem); overflow-y: auto; transform: translateZ(0); overscroll-behavior: contain; padding-right: .25rem; mask-image: linear-gradient(to bottom, #000 calc(100% - 1.25rem), transparent); -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.25rem), transparent); } /* the rating window (2026-09-27) */ .modal-dialog.scroll .rt-info { height: min(60vh, 28rem); overflow-y: auto; transform: translateZ(0); overscroll-behavior: contain; margin: 0 -.375rem; padding: 0 .375rem; } .rt-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: .125rem 0 .75rem; padding: .75rem .875rem; border-radius: 1rem; background: linear-gradient(135deg, rgba(255, 170, 60, .18), rgba(120, 80, 255, .16)); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .18); } .rt-num { display: flex; align-items: center; gap: .375rem; font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; } .rt-num .flame { width: 1.75rem; height: 1.75rem; filter: drop-shadow(0 0 .3rem rgba(255, 150, 40, .55)); } .rt-place { font-size: .9375rem; font-weight: 600; color: var(--color-text-secondary); white-space: nowrap; } .rt-sec { margin-top: .5rem; } .rt-title { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-secondary); margin: .5rem .25rem .25rem; } .rt-row { display: flex; align-items: center; gap: .625rem; padding: .5rem .625rem; border-radius: .75rem; background: var(--color-background-secondary); margin-bottom: .3125rem; } .rt-row.off { opacity: .55; } .rt-ic { width: 1.75rem; height: 1.75rem; border-radius: .5rem; display: grid; place-items: center; font-size: 1rem; background: var(--color-background); flex: none; } .rt-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .0625rem; } .rt-tx b { font-size: .9375rem; font-weight: 600; } .rt-tx span { font-size: .75rem; color: var(--color-text-secondary); } .rt-pts { flex: none; font-size: .9375rem; font-weight: 700; color: var(--color-primary); font-variant-numeric: tabular-nums; } .rt-note { margin: .75rem .25rem 0; font-size: .8125rem; line-height: 1.35; color: var(--color-text-secondary); } .modal-dialog .rt-info + .mbtns { margin-top: .75rem; } /* the rating window, v2 (2026-09-27) */ .rt-place { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; } .rt-place b { font-size: 1.0625rem; font-weight: 700; color: var(--color-text); } .rt-place span { font-size: .75rem; font-weight: 500; } .rt-title { display: flex; flex-direction: column; gap: .0625rem; text-transform: none; letter-spacing: 0; margin: .625rem .25rem .375rem; } .rt-title b { font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-secondary); } .rt-title span { font-size: .75rem; color: var(--color-text-secondary); opacity: .85; } .rt-row { align-items: flex-start; padding: .5625rem .625rem; } .rt-ic { width: 2rem; height: 2rem; border-radius: .625rem; font-size: 1.0625rem; margin-top: .0625rem; color: #fff; } .rt-ic.t1 { background: linear-gradient(135deg, #ff7eb3, #c2337a); } .rt-ic.t2 { background: linear-gradient(135deg, #f5a623, #e2720a); } .rt-ic.t3 { background: linear-gradient(135deg, #4fa3ff, #2d5fd4); } .rt-ic.t4 { background: linear-gradient(135deg, #34c759, #1f8f3f); } .rt-ic.t5 { background: linear-gradient(135deg, #8b7cff, #5a3fd6); } .rt-ic.t6 { background: linear-gradient(135deg, #5c6b7a, #2f3a45); } .rt-ic.t0 { background: rgba(120, 120, 128, .35); } .rt-tx .rule { font-size: .75rem; color: var(--color-text-secondary); line-height: 1.3; } .rt-tx .sum { font-size: .75rem; color: var(--color-text); opacity: .8; font-variant-numeric: tabular-nums; } .rt-pts { margin-top: .125rem; padding: .125rem .5rem; border-radius: .75rem; background: var(--color-primary-tint); font-size: .875rem; } .rt-row.off .rt-pts { background: rgba(120, 120, 128, .18); color: var(--color-text-secondary); } .rt-tips { margin: .75rem 0 0; padding: .625rem .75rem; border-radius: .75rem; background: var(--color-primary-tint); font-size: .8125rem; line-height: 1.45; } .rt-tips b { display: block; margin-bottom: .125rem; color: var(--color-primary); } /* the panel — my head and the capsule — sticks to the top of the pane on all three panes (2026-09-27) and the head folds as the list scrolls, the way a stranger's wall does */ .wask > .ask-panel { position: sticky; top: 0; z-index: 4; pointer-events: none; } .wask > .ask-panel > * { pointer-events: auto; } .wask > .ask-panel .ask-top { transition: transform .32s cubic-bezier(.32, .72, 0, 1); will-change: transform; } .wask > .ask-panel .ask-tabs { transition: transform .32s cubic-bezier(.32, .72, 0, 1); will-change: transform; } .wask > .ask-panel.folded .ask-tabs { transform: translateY(calc(-1 * var(--fold, 0px))); } /* «Більше» under the line fades with the line when the head folds (2026-09-27) */ .ask-top .line-more { transition: opacity .2s ease; } .ask-top.folded .line-more { opacity: 0; pointer-events: none; } .wask > .ask-panel { transition: margin-bottom .32s cubic-bezier(.32, .72, 0, 1); } /* the «Зроби свою стіну» card folds like the head (2026-09-27): up by --fold, its title back down, the rest fades */ .wask > .ask-panel .ask-mine.make { transition: transform .32s cubic-bezier(.32, .72, 0, 1); will-change: transform; } .wask > .ask-panel .ask-mine.make > b { transition: transform .32s cubic-bezier(.32, .72, 0, 1); will-change: transform; } .wask > .ask-panel .ask-mine.make.folded { transform: translateY(calc(-1 * var(--fold, 0px))); } .wask > .ask-panel .ask-mine.make.folded > b { transform: translateY(var(--fold, 0px)); } .wask > .ask-panel .ask-mine.make > span, .wask > .ask-panel .ask-mine.make > .btn, .wask > .ask-panel .ask-mine.make > .ask-whats { transition: opacity .2s ease; } .wask > .ask-panel .ask-mine.make.folded > span, .wask > .ask-panel .ask-mine.make.folded > .btn, .wask > .ask-panel .ask-mine.make.folded > .ask-whats { opacity: 0; pointer-events: none; } /* the small «Створити» in the folded strip of the make card (2026-09-27) */ .ask-mine.make .mk { position: absolute; right: .75rem; top: .6875rem; display: inline-flex; align-items: center; gap: .25rem; height: 1.875rem; padding: 0 .75rem 0 .5rem; border-radius: 1rem; background: #fff; color: #2a1c6e; font-size: .8125rem; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .32s cubic-bezier(.32, .72, 0, 1); will-change: transform; } .ask-mine.make .mk svg { width: 1rem; height: 1rem; stroke-width: 2.4; } .ask-mine.make.folded .mk { opacity: 1; pointer-events: auto; transform: translateY(var(--fold, 0px)); } .ask-mine.make.folded > b { padding-right: 7rem; } /* the wall form (2026-09-27): a live head on top, then the groups */ .ask-setup { padding: .75rem .875rem 1rem; } .ask-setup .ask-preview { margin: 0 0 .25rem; } .ask-setup .ask-preview .ask-top { border-radius: 1rem; margin: 0; box-shadow: var(--shadow-island); pointer-events: none; } .ask-setup .ask-preview .ask-top .meta, .ask-setup .ask-preview .ask-top .ask-rate, .ask-setup .ask-preview .ask-top .line-more { display: none; } .ask-setup .ask-preview .ask-top .head { padding-right: 0; } .ask-setup .ask-hint.pv { margin: 0 .25rem .375rem; } .ask-setup .ask-preview, .ask-setup .ask-sec { transition: max-height .3s cubic-bezier(.32, .72, 0, 1), opacity .25s ease, margin .3s ease; max-height: 40rem; overflow: hidden; } .ask-setup.kb .ask-preview, .ask-setup.kb .ask-sec.pics { max-height: 0; opacity: 0; margin: 0; } .ask-setup .ask-sec { margin-top: .875rem; } .ask-setup .ask-sec-h { display: flex; flex-direction: column; gap: .0625rem; margin: 0 .25rem .375rem; } .ask-setup .ask-sec-h b { font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-secondary); } .ask-setup .ask-sec-h span { font-size: .75rem; color: var(--color-text-secondary); opacity: .85; } .ask-setup .ask-hint:not(.pv) { display: none; } .ask-setup .ask-tag { display: block !important; margin: .375rem .25rem 0; } .ask-setup .photo-grid { gap: .5rem; } .ask-setup .photo-slot { border-radius: 1rem; border-width: 1.5px; background: var(--color-background-secondary); } .ask-setup .photo-slot .cover { position: absolute; left: .375rem; bottom: .375rem; padding: .125rem .5rem; border-radius: .75rem; background: rgba(0, 0, 0, .5); color: #fff; font-size: .625rem; font-weight: 700; letter-spacing: .02em; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .ask-setup .ask-fields { border-radius: .875rem; background: var(--color-background-secondary); overflow: hidden; } .ask-setup .ask-fields .form-field { margin: 0; border-radius: 0; background: transparent; padding: .75rem .875rem; } .ask-setup .ask-fields .form-field + .limit-cnt { padding: 0 .875rem; } .ask-setup .ask-fields .form-field + .limit-cnt + .form-field, .ask-setup .ask-fields .form-field + .form-field { box-shadow: inset 0 .5px 0 var(--color-dividers); } .ask-setup .row-item.setting { margin-top: 0; border-radius: .875rem; background: var(--color-background-secondary); padding: .625rem .875rem; } .ask-setup .row-item.setting::after { display: none; } .ask-setup .btn { margin-top: 1rem; height: 3rem; border-radius: 1.5rem; font-size: 1rem; } .ask-setup .ask-fields textarea.form-field { border-top: .5px solid var(--color-dividers); min-height: 4.5rem; } .ask-setup .ask-fields input.form-field { font-weight: 600; } /* a conversation that is gone dissolves before its screen slides away (2026-09-27) */ .chat-layer .msgs.dissolve, .chat-layer .composer-wrap.dissolve { transition: opacity .24s ease, transform .24s ease; opacity: 0; transform: scale(.96); pointer-events: none; } /* «Реклама» in the admin panel (2026-09-27): one compact card a broadcast, the details behind a tap */ .card.ad { display: flex; flex-direction: column; gap: .5rem; padding: .75rem .875rem; cursor: pointer; position: relative; overflow: hidden; } .ad-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; } .ad-head b { font-size: 1rem; font-weight: 700; } .ad-head span { font-size: .75rem; color: var(--color-text-secondary); white-space: nowrap; } .card.ad.running .ad-head span { color: var(--color-primary); font-weight: 600; } .ad-bar { height: .3125rem; border-radius: .25rem; background: var(--color-background-secondary); overflow: hidden; } .ad-bar i { display: block; height: 100%; border-radius: .25rem; background: var(--color-primary); transition: width .5s ease; } .card.ad.running .ad-bar i { background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .35) 50%, rgba(255, 255, 255, 0) 100%); background-size: 200% 100%; animation: ad-shine 1.4s linear infinite; } @keyframes ad-shine { from { background-position: 200% 0; } to { background-position: -200% 0; } } .ad-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; } .ad-nums div { display: flex; flex-direction: column; min-width: 0; } .ad-nums b { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1.15; } .ad-nums span { font-size: .6875rem; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ad-whyline { font-size: .75rem; line-height: 1.3; color: var(--color-text-secondary); } .ad-whyline b { font-weight: 600; color: var(--color-text); } .modal-dialog.scroll .ad-more { height: min(60vh, 28rem); overflow-y: auto; transform: translateZ(0); overscroll-behavior: contain; margin: 0 -.375rem; padding: 0 .375rem; } .ad-sec { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-secondary); margin: .75rem .125rem .25rem; } .ad-sec:first-child { margin-top: 0; } .ad-row { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; padding: .375rem .5rem; border-radius: .5rem; background: var(--color-background-secondary); margin-bottom: .25rem; font-size: .875rem; } .ad-row span { color: var(--color-text-secondary); } .ad-row b { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; } .ad-text { font-size: .8125rem; line-height: 1.35; color: var(--color-text-secondary); white-space: pre-line; border-left: 2px solid var(--color-borders); padding-left: .625rem; margin: .25rem .125rem 0; } /* the start screen (2026-09-27): the logo, the name, the bar that fills as the app comes up */ #splash { position: fixed; inset: 0; z-index: 1400; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .875rem; background: var(--color-background); color: var(--color-text); transition: opacity .35s ease; } #splash.out { opacity: 0; pointer-events: none; } #splash img { width: 5.5rem; height: 5.5rem; border-radius: 1.5rem; box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .18); } #splash b { font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em; } #splash .track { width: min(60vw, 14rem); height: .375rem; border-radius: .25rem; background: var(--color-background-secondary); overflow: hidden; margin-top: .375rem; } #splash .track i { display: block; height: 100%; width: 0; border-radius: .25rem; background: var(--color-primary); transition: width .3s linear; } #splash span { font-size: .8125rem; color: var(--color-text-secondary); } /* the admin panel's long lists in pages of 20 (2026-09-27) */ .paged-off { display: none !important; } .pager { display: block; margin: .25rem .75rem .875rem; padding: .5rem; color: var(--color-text-secondary); font-size: .75rem; text-align: center; } /* the sentinel: the next page comes when it scrolls into view */ /* rows the phone has not scrolled to are neither laid out nor painted (Safari 18, Chrome): the admin lists only */ .layer[data-screen="admin"] .rows > .row-item { content-visibility: auto; contain-intrinsic-size: auto 5rem; } /* not the queue cards: their guessed height made the list jump to the top on every redraw (2026-09-28) */ /* the «turn on notifications» bar (2026-09-27): stuck to the header's underside, full width, and it GLOWS — a blurred halo behind it breathing by opacity, a light sweeping across by transform; nothing repaints, only composites */ .reach-bar { position: relative; display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; color: #fff; text-align: left; flex: none; z-index: 4; } /* a field in focus, a keyboard up: the bar folds away and comes back when the typing ends (2026-09-27) */ .reach-bar { max-height: 6rem; transition: max-height .25s ease, opacity .2s ease; } body.field-focus .reach-bar, body.keyboard-visible .reach-bar { max-height: 0; opacity: 0; overflow: hidden; pointer-events: none; } .reach-bar[hidden] { display: none; } .reach-bar .rb-glow { position: absolute; left: 0; right: 0; top: .125rem; bottom: -.5rem; border-radius: 0; background: radial-gradient(ellipse at 50% 60%, rgba(122, 140, 255, .95), rgba(64, 120, 255, .55) 60%, transparent 100%); filter: blur(10px); opacity: .55; animation: reach-breathe 2s ease-in-out infinite; pointer-events: none; } .reach-bar .rb-body { position: relative; display: flex; align-items: center; gap: .625rem; padding: .625rem .875rem; border-radius: 0; background: linear-gradient(120deg, #2f7fff, #6b4dff 55%, #2f7fff); background-size: 100% 100%; overflow: hidden; font-size: .8125rem; font-weight: 600; box-shadow: 0 .5rem 1.25rem rgba(70, 110, 255, .45); } .reach-bar .rb-body::after { content: ""; position: absolute; top: -50%; bottom: -50%; left: -30%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-18deg) translateX(-100%); animation: reach-sweep 2.6s ease-in-out infinite; pointer-events: none; } @keyframes reach-breathe { 0%, 100% { opacity: .35; } 50% { opacity: 1; } } @keyframes reach-sweep { 0% { transform: skewX(-18deg) translateX(-120%); } 60%, 100% { transform: skewX(-18deg) translateX(420%); } } .reach-bar .ic { flex: none; font-size: 1.125rem; } .reach-bar .tx { flex: 1; min-width: 0; line-height: 1.25; } .reach-bar .go { flex: none; height: 1.875rem; display: inline-flex; align-items: center; padding: 0 .75rem; border-radius: 1rem; background: #fff; color: #3b5bdb; font-weight: 700; font-size: .75rem; position: relative; z-index: 1; box-shadow: 0 0 .75rem rgba(255, 255, 255, .6); } @media (prefers-reduced-motion: reduce) { .reach-bar .rb-glow, .reach-bar .rb-body::after { animation: none; } } /* my place in the top (2026-09-27): the chip on my card, the window behind it */ .ask-place { display: inline-flex; align-items: center; gap: .3rem; margin: .5rem 0 0 .375rem; height: 1.5rem; padding: 0 .625rem 0 .5rem; border-radius: .75rem; background: linear-gradient(135deg, rgba(123, 77, 255, .85), rgba(51, 144, 236, .85)); color: #fff; font-size: .75rem; line-height: 1; box-shadow: 0 .125rem .5rem rgba(60, 80, 220, .35); } .ask-place b { font-weight: 800; font-size: .8125rem; font-variant-numeric: tabular-nums; } .ask-place.top { background: linear-gradient(135deg, #ffd166, #ff8c42); color: #3a2400; box-shadow: 0 .125rem .625rem rgba(255, 160, 60, .5); } .ask-top .meta { display: flex; align-items: center; flex-wrap: wrap; } .pl-info { display: flex; flex-direction: column; gap: .625rem; } .pl-head { display: flex; flex-direction: column; align-items: center; padding: 1rem .75rem .875rem; border-radius: 1rem; background: linear-gradient(135deg, #6b4dff, #3390ec); color: #fff; } .pl-head.gold { background: linear-gradient(135deg, #ffd166, #ff8c42); color: #3a2400; } .pl-medal { font-size: 2.25rem; line-height: 1; } .pl-rank { font-size: 2.5rem; font-weight: 900; letter-spacing: -.03em; line-height: 1.1; margin-top: .25rem; } .pl-sub { font-size: .875rem; font-weight: 600; opacity: .9; } .pl-pts { display: flex; align-items: center; justify-content: center; gap: .375rem; font-size: .9375rem; color: var(--color-text-secondary); } .pl-pts .flame { width: 1.25rem; height: 1.25rem; } .pl-pts b { font-size: 1.125rem; font-weight: 800; color: var(--color-text); } .pl-text { margin: 0; font-size: .875rem; line-height: 1.4; color: var(--color-text); } /* ===== the admin panel, reworked (2026-09-28): compact, plain, no icons ===== */ .adm-nav { display: flex; gap: .3125rem; padding: .125rem .75rem .375rem; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .adm-nav::-webkit-scrollbar { display: none; } .adm-nav .chip { position: relative; flex: none; display: inline-flex; align-items: center; gap: .3125rem; height: 1.875rem; padding: 0 .625rem; border-radius: .5rem; background: var(--color-background); color: var(--color-text); font-size: .75rem; font-weight: 600; letter-spacing: .01em; } .adm-nav .chip.on { background: var(--color-primary); color: #fff; } .adm-nav .chip i { font-style: normal; min-width: 1rem; height: 1rem; padding: 0 .25rem; border-radius: .5rem; background: var(--color-error, #ff3b30); color: #fff; font-size: .625rem; font-weight: 700; display: inline-grid; place-items: center; } .adm-nav .chip i[hidden] { display: none; } .adm-nav .chip.on i { background: #fff; color: var(--color-primary); } .adm-sub { display: flex; gap: .25rem; padding: 0 .75rem .375rem; overflow-x: auto; scrollbar-width: none; } .adm-sub::-webkit-scrollbar { display: none; } .adm-sub .sub { flex: none; display: inline-flex; align-items: center; gap: .25rem; height: 1.625rem; padding: 0 .5625rem; border-radius: .4375rem; background: var(--color-background-secondary); color: var(--color-text-secondary); font-size: .75rem; font-weight: 600; } .adm-sub .sub.on { background: var(--color-primary-tint, rgba(51, 144, 236, .15)); color: var(--color-primary); } .adm-sub .sub i { font-style: normal; min-width: .9375rem; height: .9375rem; padding: 0 .25rem; border-radius: .5rem; background: var(--color-primary); color: #fff; font-size: .5625rem; font-weight: 700; display: inline-grid; place-items: center; } .adm-sub .sub i[hidden] { display: none; } .adm-desc { margin: 0 .75rem .5rem; padding: .375rem .625rem; border-radius: .5rem; background: var(--color-background); font-size: .75rem; line-height: 1.35; color: var(--color-text-secondary); border-left: .125rem solid var(--color-primary); } .adm-desc[hidden] { display: none; } /* the dashboard: small tiles, a word on each behind a tap */ .statbox { background: var(--color-background); margin: .375rem .75rem .5rem; border-radius: .75rem; } .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .25rem; padding: .4375rem .4375rem; text-align: center; } .stat-panel { display: none; } .stat-panel.open { display: grid; } .stats > .tile { display: flex; flex-direction: column; align-items: center; gap: .0625rem; min-width: 0; padding: .375rem .1875rem .3125rem; border-radius: .5rem; background: var(--color-background-secondary); color: var(--color-text); } .stats > .tile:active { transform: scale(.97); } .stats > .tile b { display: block; font-size: 1rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.2; white-space: nowrap; } .stats > .tile b.odo { display: flex; justify-content: center; align-items: center; height: 1.2em; } .stats > .tile b .odo-col { display: block; min-width: .6em; height: 1em; line-height: 1; overflow: hidden; text-align: center; } .stats > .tile b .odo-strip { display: block; } .stats > .tile b .odo-d { display: block; height: 1em; line-height: 1; } .stats > .tile .lbl { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .5625rem; line-height: 1.15; color: var(--color-text-secondary); padding: 0 .0625rem; } .stat-head { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .4375rem .75rem; border: 0; border-top: 1px solid var(--color-borders); background: none; color: var(--color-text); font-size: .75rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; text-align: left; } .stat-head .peek { flex: 1; min-width: 0; font-size: .6875rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stat-head.open .peek { visibility: hidden; } .stat-head .chev { width: .875rem; height: .875rem; } /* the cards */ .layer[data-screen="admin"] .acard { border-radius: .75rem; padding: .625rem .75rem; margin: 0 .75rem .5rem; } .layer[data-screen="admin"] .acard .head { font-size: .8125rem; font-weight: 700; } .layer[data-screen="admin"] .acard .actions { display: flex; flex-wrap: wrap; gap: .3125rem; margin-top: .5rem; } .layer[data-screen="admin"] .acard .actions .pill { height: 1.875rem; padding: 0 .625rem; font-size: .75rem; } .layer[data-screen="admin"] .rows.card { border-radius: .75rem; margin-bottom: .5rem; } .layer[data-screen="admin"] .group-title { padding: .25rem 1rem .3125rem; font-size: .6875rem; font-weight: 700; letter-spacing: .04em; } .layer[data-screen="admin"] .ftabs { gap: .25rem; margin-bottom: .375rem; } .layer[data-screen="admin"] .ftabs button { height: 1.625rem; padding: 0 .5rem; font-size: .75rem; } .layer[data-screen="admin"] .form-field { font-size: .875rem !important; padding: .5rem .75rem !important; } /* reactions under the question bubble too (2026-09-28) */ .ask-it .qb .foot { display: flex; align-items: center; margin-top: .3125rem; } .ask-it .qb .foot[hidden] { display: none; } /* the queue's filter capsules: one scrolling row, small (2026-09-28) */ .layer[data-screen="admin"] .pills.caps { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: .25rem; padding: .25rem .75rem .375rem; } .layer[data-screen="admin"] .pills.caps::-webkit-scrollbar { display: none; } .layer[data-screen="admin"] .pills.caps .pill { flex: none; padding: .25rem .5rem; font-size: .75rem; font-weight: 600; border-radius: .4375rem; gap: .25rem; } .layer[data-screen="admin"] .pills.caps .pill .capn { font-size: .6875rem; opacity: .75; font-style: normal; } /* the queue card: a strict layout — id and tags, the author, the text, a row of plain buttons */ .layer[data-screen="admin"] .acard .head { display: flex; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 600; color: var(--color-text-secondary); } .layer[data-screen="admin"] .acard .head > span:first-child { color: var(--color-text); } .layer[data-screen="admin"] .acard .head time { margin-left: auto; font-weight: 500; } .layer[data-screen="admin"] .acard .meta { font-size: .75rem; } .layer[data-screen="admin"] .acard .text { font-size: .9375rem; line-height: 1.4; margin-top: .4375rem; } .layer[data-screen="admin"] .acard img.ph { max-height: 12rem; width: auto; max-width: 100%; border-radius: .5rem; margin-top: .5rem; display: block; } .layer[data-screen="admin"] .acard .actions { border-top: 1px solid var(--color-borders); padding-top: .5rem; margin-top: .625rem; gap: .25rem; } .layer[data-screen="admin"] .acard .actions .pill { height: 1.875rem; padding: 0 .625rem; border-radius: .4375rem; font-size: .75rem; font-weight: 600; } .layer[data-screen="admin"] .acard.marked { box-shadow: inset .1875rem 0 0 var(--color-primary); } /* the desktop (2026-09-28): the numbers on the left, a board of section columns on the right, dragged into any order */ .adm-fs { padding: 0 .625rem; font-size: .75rem; font-weight: 600; height: 1.875rem; border-radius: .5rem; white-space: nowrap; } .adm-nav .chip.more { background: var(--color-background-secondary-accent, var(--color-background)); } .adm-nav .chip.more svg { width: .875rem; height: .875rem; transform: rotate(90deg); opacity: .7; } .adm-nav .chip.more.on { background: var(--color-primary); } @media (min-width: 56rem) { body.adm-wide #app { width: 100%; max-width: none; box-shadow: none; } body.adm-wide .layer[data-screen="admin"] > .hdr { padding-left: 1.25rem; padding-right: 8rem; } /* room for Telegram's own buttons in the top-right corner of a full-screen window */ body.adm-wide .layer[data-screen="admin"] > .hdr .hright { gap: .5rem; } body.adm-wide .layer[data-screen="admin"] > .scroll.board-host { display: flex; gap: .75rem; padding: .75rem 1rem 1rem; overflow: hidden; } .board-col { display: flex; flex-direction: column; min-height: 0; flex: none; width: 26rem; border-radius: 1rem; background: rgba(127, 127, 127, .06); border: 1px solid var(--color-borders); } .board-col.numbers { width: 24rem; } .board-col.dragging { opacity: .45; } .board { flex: 1; min-width: 0; display: flex; gap: .75rem; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; } .board > .board-col { height: 100%; } .col-head { flex: none; display: flex; align-items: center; gap: .5rem; padding: .5rem .625rem; font-size: .9375rem; font-weight: 700; cursor: grab; user-select: none; border-bottom: 1px solid var(--color-borders); } .col-head:active { cursor: grabbing; } .col-head .grip { color: var(--color-text-secondary); letter-spacing: -.125rem; font-size: 1rem; } .col-head .chip { pointer-events: none; height: auto; padding: 0; background: none !important; color: var(--color-text) !important; font-size: 1rem; font-weight: 700; gap: .875rem; } .col-head .chip i { margin-left: .5rem; font-style: normal; min-width: 1.375rem; height: 1.375rem; padding: 0 .4375rem; border-radius: .6875rem; background: var(--color-error, #ff3b30); color: #fff; font-size: .75rem; font-weight: 700; display: inline-grid; place-items: center; } .col-head .chip i[hidden] { display: none; } .col-body { flex: 1; min-height: 0; overflow-y: auto; padding: .375rem 0 .75rem; } .col-body > .adm-sub { padding-top: .25rem; } .board-col.numbers .statbox { margin: .25rem .625rem .5rem; } .board-col.numbers .stats { grid-template-columns: repeat(4, 1fr); gap: .375rem; padding: .625rem; } .board-col.numbers .stats > .tile { padding: .625rem .25rem .5rem; } .board-col.numbers .stats > .tile b { font-size: 1.375rem; } .board-col.numbers .stats > .tile .lbl { font-size: .6875rem; } .board-col.numbers .stat-head { padding: .625rem .875rem; font-size: .8125rem; } .board-col .acard { margin: 0 .625rem .5rem; } .board-col .acard .text { font-size: .9375rem; } .board-col .rows.card { margin: 0 .625rem .5rem; } .board-col .pills.caps { flex-wrap: wrap; overflow: visible; padding: .25rem .625rem .375rem; } .board-col .form-field { width: calc(100% - 1.25rem) !important; margin: 0 .625rem .5rem !important; } .board-col > .col-body > .card { margin: 0 .625rem .5rem; } } /* a mouse cannot drag a hidden-scrollbar row sideways (2026-09-28, the user): with a fine pointer the capsule rows wrap instead */ @media (hover: hover) and (pointer: fine) { .adm-nav, .adm-sub, .layer[data-screen="admin"] .pills.caps { flex-wrap: wrap; overflow: visible; } } /* a queued card is dragged by its grip (2026-09-28) */ .layer[data-screen="admin"] .acard:has(> .head > .grip) { padding-left: 2.75rem; position: relative; } .layer[data-screen="admin"] .acard .head .grip { position: absolute; left: 0; top: 0; bottom: 0; width: 2.25rem; display: flex; align-items: center; justify-content: center; border-radius: .75rem 0 0 .75rem; background: var(--color-background-secondary); color: var(--color-text-secondary); font-size: 1.125rem; letter-spacing: -.125rem; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; } .layer[data-screen="admin"] .acard .head .grip:active { background: var(--color-primary-tint, rgba(51, 144, 236, .15)); color: var(--color-primary); } .layer[data-screen="admin"] .acard.dragging { opacity: .55; outline: 2px solid var(--color-primary); outline-offset: -2px; } /* the welcome (2026-09-28): the wall is there, here is the nick */ .wl-box { display: flex; flex-direction: column; gap: .75rem; } .wl-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem; padding: 1.25rem 1rem 1.125rem; border-radius: 1.25rem; background: linear-gradient(135deg, #6b4dff, #3390ec); color: #fff; box-shadow: 0 .5rem 1.5rem rgba(80, 90, 240, .3); } .wl-face { width: 4rem; height: 4rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.875rem; background: rgba(255, 255, 255, .18); box-shadow: 0 0 0 .1875rem rgba(255, 255, 255, .35); } .wl-hero b { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; } .wl-hero span { font-size: .875rem; line-height: 1.45; opacity: .92; } .wl-card { border-radius: 1rem; background: var(--color-background-secondary); padding: .75rem .875rem .875rem; display: flex; flex-direction: column; gap: .625rem; } .wl-label { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-secondary); } .wl-row { display: flex; gap: .5rem; align-items: stretch; } .wl-row input { flex: 1; min-width: 0; margin: 0 !important; padding: .8125rem .9375rem; border: 1.5px solid transparent; border-radius: .875rem; background: var(--color-background); color: var(--color-text); font-size: 1.125rem; font-weight: 700; letter-spacing: -.01em; outline: 0; transition: border-color .15s ease; } .wl-row input:focus { border-color: var(--color-primary); } .wl-roll { flex: none; display: inline-flex; align-items: center; gap: .3125rem; padding: 0 .875rem; border-radius: .875rem; background: var(--color-background); color: var(--color-text); font-size: .875rem; font-weight: 600; } .wl-roll span:first-child { font-size: 1.125rem; } .wl-preview { display: flex; align-items: center; gap: .625rem; padding: .5rem .625rem; border-radius: .75rem; background: var(--color-background); } .wl-pa { width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .875rem; color: #fff; background: linear-gradient(135deg, #6b4dff, #3390ec); flex: none; } .wl-pt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; } .wl-pt b { font-size: .9375rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wl-pt span { font-size: .75rem; color: var(--color-text-secondary); } .wl-hint { font-size: .8125rem; line-height: 1.4; color: var(--color-text-secondary); padding: 0 .125rem; } /* the rating window, v3 (2026-09-28): a gradient head, cards with room, a hint that it scrolls */ .rt-head { background: linear-gradient(135deg, #6b4dff, #3390ec); color: #fff; padding: .875rem 1rem; border-radius: 1rem; margin: .125rem 0 .875rem; } .rt-num b, .rt-place b, .rt-place span { color: #fff; } .rt-place span { opacity: .85; } .rt-num .flame { filter: drop-shadow(0 0 .3rem rgba(255, 220, 120, .7)); } .rt-title b { font-size: .8125rem; letter-spacing: .05em; } .rt-row { padding: .625rem .75rem; border-radius: .875rem; margin-bottom: .375rem; } .rt-tx b { font-size: .9375rem; } .rt-tx .rule { font-size: .8125rem; line-height: 1.35; } .rt-tips { margin: .875rem .125rem 0; padding: .75rem .875rem; border-radius: .875rem; background: var(--color-primary-tint, rgba(51, 144, 236, .12)); font-size: .875rem; line-height: 1.45; } .rt-tips b { display: block; margin-bottom: .25rem; color: var(--color-primary); } .rt-more { position: sticky; bottom: 0; margin: .5rem -.375rem 0; padding: .5rem 0 .25rem; text-align: center; font-size: .75rem; font-weight: 600; color: var(--color-primary); background: linear-gradient(to top, var(--color-background) 55%, transparent); transition: opacity .25s ease; animation: rt-bounce 1.6s ease-in-out infinite; } .rt-more.gone { opacity: 0; pointer-events: none; animation: none; } @keyframes rt-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(.1875rem); } } /* the wall form, brighter (2026-09-28, the user: «поярче, а то говно») */ .ask-setup { padding: .5rem .5rem 1rem !important; background: transparent !important; box-shadow: none !important; } .ask-setup .ask-preview { margin: 0 0 .75rem; } .ask-setup .ask-hint.pv { margin: .25rem .375rem .5rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .ask-setup .ask-sec { margin: 0 0 .625rem; padding: .875rem .875rem 1rem; border-radius: 1rem; background: var(--color-background); box-shadow: var(--shadow-island, 0 .0625rem .25rem rgba(0, 0, 0, .06)); } .ask-setup .ask-sec-h { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .5rem; } .ask-setup .ask-sec-h b { font-size: 1rem; font-weight: 800; letter-spacing: -.01em; } .ask-setup .ask-sec-h span { font-size: .75rem; color: var(--color-text-secondary); } .ask-setup .form-field { margin: .5rem 0 0 !important; padding: .8125rem .9375rem !important; border-radius: .875rem !important; background: var(--color-background-secondary) !important; border: 1.5px solid transparent !important; font-size: 1.0625rem !important; font-weight: 600; transition: border-color .15s ease; } .ask-setup .form-field:focus { border-color: var(--color-primary) !important; } .ask-setup textarea.form-field { font-weight: 500; } .ask-setup .ask-tag { margin: .625rem .125rem 0; padding: .5rem .625rem; border-radius: .625rem; background: var(--color-primary-tint, rgba(51, 144, 236, .12)); color: var(--color-primary); font-size: .8125rem; } .ask-setup .photo-grid { gap: .5rem; } .ask-setup .photo-slot { border-radius: .875rem; background: var(--color-background-secondary); } .ask-setup .photo-slot .plus { width: 1.75rem; height: 1.75rem; color: var(--color-primary); } .ask-setup .ask-tones { display: flex; gap: .5rem; flex-wrap: wrap; padding: .125rem 0 0; } .ask-setup .ask-tones .tone { width: 2.75rem; height: 2.75rem; border-radius: .875rem; box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .18); transition: transform .15s ease; } .ask-setup .ask-tones .tone.on { transform: scale(1.08); box-shadow: 0 0 0 .1875rem var(--color-background), 0 0 0 .3125rem var(--color-primary); } .ask-setup .row-item.setting { margin: 0; padding: .25rem 0; background: transparent; } .ask-setup .row-item.setting b { font-size: .9375rem; } .ask-setup .btn { margin: .25rem 0 0; height: 3.125rem; border-radius: 1rem; font-size: 1.0625rem; font-weight: 800; background: linear-gradient(135deg, #6b4dff, #3390ec); color: #fff; box-shadow: 0 .5rem 1.25rem rgba(80, 90, 240, .35); } .ask-setup > .note { margin: .75rem .5rem 0; text-align: center; font-size: .8125rem; } .ask-setup .ask-keep { margin-top: .5rem; color: var(--color-text-secondary); } /* the welcome under a keyboard (2026-09-28): the hero folds, the dialog never taller than the box; the field looks like a field */ #app > .modal-root { padding: .75rem; box-sizing: border-box; } #app > .modal-root .modal-dialog { max-height: 100%; overflow-y: auto; } .wl-hero { transition: max-height .25s ease, opacity .2s ease, margin .25s ease, padding .25s ease; max-height: 20rem; overflow: hidden; } .wl-box.kb .wl-hero { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; margin: 0; } .wl-box.kb .wl-hint { display: none; } .wl-label { display: flex; justify-content: space-between; align-items: baseline; } .wl-label i { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--color-primary); } .wl-inp { position: relative; flex: 1; min-width: 0; } .wl-inp input { width: 100%; padding-right: 2.75rem !important; border: 1.5px solid var(--color-borders) !important; background: var(--color-background) !important; box-shadow: inset 0 0 0 1px transparent; } .wl-inp input:focus { border-color: var(--color-primary) !important; box-shadow: 0 0 0 .1875rem var(--color-primary-tint, rgba(51, 144, 236, .18)); } .wl-inp .pen { position: absolute; right: .875rem; top: 50%; width: 1.125rem; height: 1.125rem; transform: translateY(-50%); color: var(--color-primary); pointer-events: none; } /* the nick field, bigger, no dice (2026-09-28) */ .wl-inp input { font-size: 1.375rem !important; padding: 1rem 2.875rem 1rem 1.125rem !important; border-radius: 1rem !important; } .wl-inp .pen { width: 1.375rem; height: 1.375rem; right: 1rem; } /* the head colour as one compact row under the words (2026-09-28) */ .ask-setup .ask-tone-row { display: flex; align-items: center; gap: .625rem; margin-top: .75rem; } .ask-setup .ask-tone-lbl { flex: none; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-secondary); } .ask-setup .ask-tone-row .ask-tones { flex: 1; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: .375rem; padding: .1875rem .1875rem; } .ask-setup .ask-tone-row .ask-tones::-webkit-scrollbar { display: none; } .ask-setup .ask-tone-row .ask-tones .tone { flex: none; width: 1.875rem; height: 1.875rem; border-radius: .5625rem; box-shadow: 0 .0625rem .25rem rgba(0, 0, 0, .18); } .ask-setup .ask-tone-row .ask-tones .tone.on { transform: scale(1.1); box-shadow: 0 0 0 .125rem var(--color-background), 0 0 0 .25rem var(--color-primary); } /* the head colours in one even row under the preview; the words as a Telegram-like group (2026-09-28) */ .ask-setup .ask-tone-bar { margin: -.25rem 0 .75rem; padding: 0 .125rem; } .ask-setup .ask-tone-bar .ask-tones { display: flex; justify-content: space-between; align-items: center; gap: .25rem; padding: .25rem 0; overflow: visible; } .ask-setup .ask-tone-bar .ask-tones .tone { flex: 1 1 0; max-width: 2.375rem; aspect-ratio: 1; width: auto; height: auto; border-radius: .625rem; box-shadow: 0 .0625rem .25rem rgba(0, 0, 0, .2); } .ask-setup .ask-tone-bar .ask-tones { padding: .5rem 0 .25rem; } .ask-setup .ask-tone-bar .ask-tones .tone { transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s ease; position: relative; } .ask-setup .ask-tone-bar .ask-tones .tone.on { transform: translateY(-.3125rem) scale(1.22); z-index: 1; box-shadow: 0 0 0 .125rem var(--color-background), 0 0 0 .25rem var(--color-primary), 0 .375rem 1rem rgba(51, 144, 236, .55); } .ask-setup .ask-sec { padding: .625rem .75rem .75rem; } .ask-setup .ask-sec-h { margin: 0 .125rem .375rem; } .ask-setup .ask-sec-h b { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-secondary); } .ask-setup .ask-fields { border-radius: .75rem; background: var(--color-background-secondary); overflow: hidden; } .ask-setup .ask-fields .form-field { margin: 0 !important; padding: .6875rem .875rem !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; font-size: 1rem !important; font-weight: 500; box-shadow: none !important; } .ask-setup .ask-fields .form-field + .form-field { border-top: 1px solid var(--color-borders) !important; } .ask-setup .ask-fields input.form-field { font-weight: 700; } .ask-setup textarea.form-field { min-height: 3.5rem; } .ask-setup .ask-tag { margin: .5rem .125rem 0; padding: 0; background: none; color: var(--color-text-secondary); font-size: .75rem; } /* compact visibility with a «?», the save bar pinned to the bottom (2026-09-28) */ .ask-setup .row-item.setting .label { display: flex; align-items: center; gap: .5rem; } .ask-why { width: 1.5rem; height: 1.5rem; border-radius: 50%; display: inline-grid; place-items: center; background: transparent; color: var(--color-primary); flex: none; } /* not «.ask-q»: that is the search box on the walls tab */ .ask-why svg { width: 1.25rem; height: 1.25rem; } .ask-setup .ask-sec.pics .ask-sec-h span, .ask-setup .ask-sec-h span { font-size: .6875rem; } .ask-save { position: absolute; left: 0; right: 0; bottom: 0; padding: .5rem .875rem calc(.625rem + var(--safe-bottom, 0px)); background: var(--color-background-secondary); box-shadow: 0 -.25rem 1rem rgba(0, 0, 0, .12); z-index: 5; } .ask-save .btn { margin: 0; } .scroll.with-save { padding-bottom: 5.5rem !important; } body.keyboard-visible .ask-save, body.field-focus .ask-save { display: none; } /* under a keyboard the bar would only steal the room */ .ask-setup .ask-keep { margin: .5rem .5rem 0; text-align: center; font-size: .75rem; } /* comments under a wall record (2026-09-29) */ .ask-cm { margin: .125rem .75rem .75rem 3.25rem; } .ask-cm-head { display: inline-flex; align-items: center; gap: .375rem; height: 1.625rem; padding: 0 .625rem 0 .5rem; border-radius: .8125rem; background: var(--color-background-secondary); color: var(--color-text-secondary); font-size: .75rem; font-weight: 600; } .ask-cm-head svg { width: .875rem; height: .875rem; } .ask-cm-head.on { background: var(--color-primary-tint, rgba(51, 144, 236, .15)); color: var(--color-primary); } .ask-cm-body { margin-top: .5rem; display: flex; flex-direction: column; gap: .5rem; } .ask-cm-row { display: flex; align-items: flex-start; gap: .5rem; padding: .5rem .625rem; border-radius: .75rem; background: var(--color-background); position: relative; } .ask-cm-row .avatar.small { width: 1.75rem; height: 1.75rem; font-size: .6875rem; flex: none; } .ask-cm-row .tx { display: flex; flex-direction: column; gap: .125rem; min-width: 0; flex: 1; } .ask-cm-row .tx b { font-size: .8125rem; font-weight: 700; } .ask-cm-row .tx b.tap, .ask-cm-row .avatar.tap { cursor: pointer; } .ask-cm-row .tx b.tap { color: var(--color-primary); } .ask-cm-row .tx .t { font-size: .875rem; line-height: 1.35; word-break: break-word; } .ask-cm-row .tx time { font-size: .6875rem; color: var(--color-text-secondary); } .ask-cm-row .x { position: absolute; right: .375rem; top: .375rem; width: 1.375rem; height: 1.375rem; border-radius: 50%; display: grid; place-items: center; color: var(--color-text-secondary); background: var(--color-background-secondary); } .ask-cm-row .x svg { width: .75rem; height: .75rem; } .ask-cm-form { display: flex; gap: .375rem; align-items: center; } .ask-cm-form input { flex: 1; min-width: 0; height: 2.375rem; padding: 0 .875rem; border: 1.5px solid var(--color-borders); border-radius: 1.1875rem; background: var(--color-background); color: var(--color-text); font-size: .9375rem; outline: 0; } .ask-cm-form input:focus { border-color: var(--color-primary); } .ask-cm-send { flex: none; width: 2.375rem; height: 2.375rem; border-radius: 50%; display: grid; place-items: center; background: var(--color-primary); color: #fff; } .ask-cm-send svg { width: 1.125rem; height: 1.125rem; } .ask-cm-need { align-self: flex-start; padding: .5rem .75rem; border-radius: .75rem; background: var(--color-primary-tint, rgba(51, 144, 236, .15)); color: var(--color-primary); font-size: .8125rem; font-weight: 600; } /* the record as one block (2026-09-28, the user: «хтось спитав — в один блок»): the question strip on top, the answer on the gradient under it, the comments in the foot — one rounded card instead of two chat bubbles */ .ask-it { margin: 0 .75rem .75rem; border-radius: 1.125rem; overflow: hidden; background: var(--color-background); box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .08); } .ask-it .qrow { align-items: flex-start; gap: .5rem; padding: .625rem .75rem .5rem; } .ask-it .qrow .avatar { margin-top: .0625rem; } .ask-it .qb { flex: 1; min-width: 0; max-width: none; padding: 0; border-radius: 0; background: none; box-shadow: none; } .ask-it .qb b { margin-bottom: .125rem; } .ask-it .qb .foot { margin-top: .25rem; } .ask-it .qb .foot:has(.reacts:empty) { display: none; } .ask-it .qb .rc { background: var(--color-background-secondary); color: var(--color-text); } .ask-it .qb .rc.own { background: var(--color-primary-tint, rgba(51, 144, 236, .15)); color: var(--color-primary); } .ask-it .arow { flex-direction: row-reverse; justify-content: flex-start; align-items: flex-start; gap: .5rem; margin: 0; padding: .625rem .75rem .5625rem; background: linear-gradient(135deg, #8b7cff, #5a3fd6); } .ask-it .arow .avatar { margin-top: .0625rem; box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); } .ask-it .ab { flex: 1; min-width: 0; max-width: none; padding: 0; border-radius: 0; background: none; box-shadow: none; } .ask-it .ab b { color: rgba(255, 255, 255, .85); opacity: 1; margin-bottom: .125rem; } .ask-it .ab .foot { margin-top: .3125rem; } .ask-it .ask-cm { margin: 0; padding: .5rem .75rem .625rem; background: var(--color-background); } .ask-it .ask-cm-row { background: var(--color-background-secondary); } .ask-it .ask-cm-form input { background: var(--color-background-secondary); border-color: transparent; } .ask-it .ask-cm-form input:focus { border-color: var(--color-primary); } /* the card is one purple surface (2026-09-29, the user: «комментарии не тёмным, а под цвет сообщения»): the question strip on top keeps the page's colour, the answer and the comments share the gradient */ .ask-it { background: linear-gradient(135deg, #8b7cff, #5a3fd6); } .ask-it .qrow { background: var(--color-background); } .ask-it .arow { background: none; } .ask-it .ask-cm { background: none; padding: .375rem .75rem .625rem; border-top: 1px solid rgba(255, 255, 255, .14); } .ask-it .ask-cm-head { background: rgba(255, 255, 255, .18); color: #fff; } .ask-it .ask-cm-head.on { background: #fff; color: #5a3fd6; } .ask-it .ask-cm-row { background: rgba(255, 255, 255, .14); color: #fff; padding: .5rem .625rem .375rem; -webkit-user-select: none; user-select: none; } .ask-it .ask-cm-row .who { display: inline-flex; align-items: center; gap: .375rem; padding: 0; margin: 0 0 .125rem; background: none; color: #fff; font: inherit; text-align: left; align-self: flex-start; } .ask-it .ask-cm-row .who b { font-size: .8125rem; font-weight: 700; } .ask-it .ask-cm-row .who.tap b { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: .125rem; } .ask-it .ask-cm-row .re { display: flex; flex-direction: column; margin: 0 0 .25rem; padding: .125rem .5rem; border-left: 2px solid rgba(255, 255, 255, .7); font-size: .75rem; line-height: 1.3; opacity: .9; } .ask-it .ask-cm-row .re b { font-weight: 700; } .ask-it .ask-cm-row .re span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ask-it .ask-cm-row .tx .t { color: #fff; } .ask-it .ask-cm-row .foot { display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem; margin-top: .25rem; min-height: .875rem; } .ask-it .ask-cm-row .foot .reacts { display: flex; flex-wrap: wrap; gap: .25rem; } .ask-it .ask-cm-row .foot .reacts:empty { display: none; } .ask-it .ask-cm-row .foot .rc { height: 1.375rem; padding: 0 .4375rem 0 .3125rem; font-size: .6875rem; } .ask-it .ask-cm-row .foot .rc .e { font-size: .8125rem; } .ask-it .ask-cm-row time { color: rgba(255, 255, 255, .7); } .ask-it .ask-cm-reply { display: flex; align-items: center; gap: .5rem; padding: .25rem .5rem .25rem .625rem; border-radius: .625rem; background: rgba(255, 255, 255, .14); color: #fff; font-size: .75rem; } .ask-it .ask-cm-reply > svg { width: .875rem; height: .875rem; flex: none; opacity: .8; } .ask-it .ask-cm-reply .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; } .ask-it .ask-cm-reply .tx b { font-weight: 700; } .ask-it .ask-cm-reply .tx span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .85; } .ask-it .ask-cm-reply .x { flex: none; width: 1.375rem; height: 1.375rem; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .2); color: #fff; } .ask-it .ask-cm-reply .x svg { width: .75rem; height: .75rem; } .ask-it .ask-cm-form input { background: rgba(255, 255, 255, .16); border-color: transparent; color: #fff; } .ask-it .ask-cm-form input::placeholder { color: rgba(255, 255, 255, .65); } .ask-it .ask-cm-form input:focus { border-color: rgba(255, 255, 255, .6); } .ask-it .ask-cm-send { background: #fff; color: #5a3fd6; } .ask-it .ask-cm-need { background: rgba(255, 255, 255, .18); color: #fff; } /* the blocked list in the form */ .ask-blocks { display: flex; flex-direction: column; gap: .375rem; } .ask-blocks .row { display: flex; align-items: center; gap: .625rem; padding: .5rem .625rem; border-radius: .75rem; background: var(--color-background-secondary); } .ask-blocks .row .avatar.small { width: 2rem; height: 2rem; font-size: .75rem; flex: none; } .ask-blocks .row b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9375rem; } .ask-blocks .row .un { flex: none; height: 1.875rem; padding: 0 .75rem; border-radius: .9375rem; background: var(--color-primary-tint, rgba(51, 144, 236, .15)); color: var(--color-primary); font-size: .8125rem; font-weight: 600; } /* the time beside the name (2026-09-29, the user: «время справа, напротив, а не под строкой»); pages of comments; the lit one */ .ask-it .hd { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .125rem; } .ask-it .hd b { margin-bottom: 0; } .ask-it .hd time { margin-left: auto; align-self: baseline; } .ask-it .ab .foot:has(.reacts:empty) { display: none; } .ask-it .ask-cm-row .hd { align-items: center; margin-bottom: .1875rem; } .ask-it .ask-cm-row .who { margin: 0; } .ask-it .ask-cm-row .foot:has(.reacts:empty) { display: none; } .ask-it .ask-cm-row .re { width: 100%; text-align: left; font: inherit; font-size: .75rem; color: inherit; background: rgba(255, 255, 255, .1); border-radius: .375rem; position: relative; overflow: hidden; } .ask-it .ask-cm-row.lit { animation: cm-lit 1.8s ease-out; } @keyframes cm-lit { 0%, 35% { background: rgba(255, 255, 255, .5); box-shadow: 0 0 0 2px #fff; } 100% { background: rgba(255, 255, 255, .14); box-shadow: none; } } .ask-it .ask-cm-more { align-self: center; height: 1.875rem; padding: 0 .875rem; border-radius: .9375rem; background: rgba(255, 255, 255, .18); color: #fff; font-size: .8125rem; font-weight: 600; } /* three compact buttons on someone's wall (2026-09-29): two anonymous ones in a row, the signed letter under them */ .ask-tiles.three { flex-direction: column; gap: .375rem; margin-top: .625rem; } .ask-tiles.three .trow { display: flex; gap: .375rem; } .ask-tiles.three .tile { height: 2.25rem; border-radius: .625rem; gap: .375rem; padding: 0 .5rem; } .ask-tiles.three .tile span { font-size: .8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ask-tiles.three .tile svg { width: 1rem; height: 1rem; flex: none; } .ask-tiles.three .tile.signed { width: 100%; background: var(--color-primary); color: #fff; } .ask-top.pic .ask-tiles.three .tile.signed { background: rgba(255, 255, 255, .3); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .45); } .ask-tiles.three .tile .avatar.mini { width: 1.25rem; height: 1.25rem; font-size: .5625rem; flex: none; } .ask-cm-cnt { font-size: .6875rem; color: rgba(255, 255, 255, .8); text-align: right; margin-top: -.125rem; } .ask-cm-cnt.over { color: #ffd2d2; font-weight: 700; } .ask-setup .row-item.setting .label .subtitle { font-size: .8125rem; color: var(--color-text-secondary); } /* my head runs edge to edge like a stranger's page, and the capsule is glued right under it as a grid of three (2026-09-29, the user: «прилепи капсулу к профилю, на всю ширину, сеткой») */ .wask > .ask-panel { margin: 0 0 .5rem; } .wask > .ask-panel .ask-top { border-radius: 0; margin: 0; box-shadow: none; } .wask.onwall .ask-panel .ask-tabs, .wask > .ask-panel .ask-tabs { margin: 0; border-radius: 0; padding: .375rem .75rem .5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .3125rem; background: var(--color-background); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 .5px 0 var(--color-borders); } .wask.onwall .ask-panel .ask-tabs button, .wask > .ask-panel .ask-tabs button { width: auto; height: 2rem; border-radius: .625rem; font-size: .8125rem; font-weight: 600; color: var(--color-text); text-shadow: none; background: rgba(118, 118, 128, .14); } .wask.onwall .ask-panel .ask-tabs button.on, .wask > .ask-panel .ask-tabs button.on, :root[data-theme="dark"] .wask.onwall .ask-panel .ask-tabs button.on { color: #fff; background: var(--color-primary); box-shadow: none; } .wask.onwall .ask-panel .ask-tabs button.on .n { background: #fff; color: var(--color-primary); } .ask-it.in { animation: ask-in .3s ease-out; } @keyframes ask-in { from { opacity: 0; transform: translateY(-.5rem); } to { opacity: 1; transform: none; } } .wall-chat .wask { padding-top: 0; } /* the head sits right under the header, no seam (2026-09-29, the user) */ /* all three the same box and type (2026-09-29, the user: «по высоте как те кнопки сверху, тот же шрифт и жирность») */ .ask-tiles.three .tile, .ask-tiles.three .tile.signed { height: 2.875rem; border-radius: .75rem; gap: .5rem; } .ask-tiles.three .tile span, .ask-tiles.three .tile.signed span { font-size: .9375rem; font-weight: 600; } .ask-tiles.three .tile svg, .ask-tiles.three .tile.signed svg { width: 1.125rem; height: 1.125rem; } .ask-tiles.three .tile .avatar.mini { width: 1.375rem; height: 1.375rem; font-size: .625rem; } /* the capsule strip is solid in the dark theme too (the theme rule outranked the strip's colour) */ :root[data-theme="dark"] .wask.onwall .ask-panel .ask-tabs, :root:not([data-theme="light"]) .wask.onwall .ask-panel .ask-tabs { background: var(--color-background); } .ask-compose.away { opacity: 0; pointer-events: none; transform: translateY(1rem); } .ask-tiles.three > .trow, .ask-tiles.three > .tile.signed { flex: none; } /* the column must not flex the signed tile down to its text (2026-09-29) */ /* lower, and the words fit (2026-09-29, the user: «текст обрезается, сделай чуть меньше по высоте») */ .ask-tiles.three .tile, .ask-tiles.three .tile.signed { height: 2.5rem; border-radius: .6875rem; gap: .3125rem; padding: 0 .375rem; } .ask-tiles.three .tile span, .ask-tiles.three .tile.signed span { font-size: .8125rem; font-weight: 600; letter-spacing: -.01em; } .ask-tiles.three .tile svg, .ask-tiles.three .tile.signed svg { width: 1rem; height: 1rem; } /* the light theme: white record cards instead of purple (2026-09-29, the user) — the dark theme keeps the gradient */ :root[data-theme="light"] .ask-it { background: #fff; box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .1); } :root[data-theme="light"] .ask-it .qrow { background: var(--color-background-secondary, #f2f2f7); } :root[data-theme="light"] .ask-it .arow { background: none; } :root[data-theme="light"] .ask-it .arow .avatar { box-shadow: 0 0 0 2px rgba(0, 0, 0, .06); } :root[data-theme="light"] .ask-it .ab { color: var(--color-text); } :root[data-theme="light"] .ask-it .ab b { color: var(--color-primary); } :root[data-theme="light"] .ask-it time, :root[data-theme="light"] .ask-it .ask-cm-row time { color: var(--color-text-secondary); } :root[data-theme="light"] .ask-it .rc { background: var(--color-background-secondary, #f2f2f7); color: var(--color-text); } :root[data-theme="light"] .ask-it .rc.own { background: var(--color-primary); color: #fff; } :root[data-theme="light"] .ask-it .ask-cm { border-top-color: rgba(0, 0, 0, .06); } :root[data-theme="light"] .ask-it .ask-cm-head { background: var(--color-background-secondary, #f2f2f7); color: var(--color-text-secondary); } :root[data-theme="light"] .ask-it .ask-cm-head.on { background: var(--color-primary); color: #fff; } :root[data-theme="light"] .ask-it .ask-cm-row { background: var(--color-background-secondary, #f2f2f7); color: var(--color-text); } :root[data-theme="light"] .ask-it .ask-cm-row .who { color: var(--color-text); } :root[data-theme="light"] .ask-it .ask-cm-row .who.tap b { text-decoration-color: rgba(0, 0, 0, .25); } :root[data-theme="light"] .ask-it .ask-cm-row .re { background: rgba(0, 0, 0, .05); border-left-color: var(--color-primary); } :root[data-theme="light"] .ask-it .ask-cm-row .tx .t { color: var(--color-text); } :root[data-theme="light"] .ask-it .ask-cm-row.lit { animation: cm-lit-light 1.8s ease-out; } @keyframes cm-lit-light { 0%, 35% { background: rgba(51, 144, 236, .22); box-shadow: 0 0 0 2px var(--color-primary); } 100% { background: #f2f2f7; box-shadow: none; } } :root[data-theme="light"] .ask-it .ask-cm-reply { background: var(--color-background-secondary, #f2f2f7); color: var(--color-text); } :root[data-theme="light"] .ask-it .ask-cm-reply .x { background: rgba(0, 0, 0, .08); color: var(--color-text); } :root[data-theme="light"] .ask-it .ask-cm-form input { background: var(--color-background-secondary, #f2f2f7); color: var(--color-text); } :root[data-theme="light"] .ask-it .ask-cm-form input::placeholder { color: var(--color-text-secondary); } :root[data-theme="light"] .ask-it .ask-cm-form input:focus { border-color: var(--color-primary); } :root[data-theme="light"] .ask-it .ask-cm-send { background: var(--color-primary); color: #fff; } :root[data-theme="light"] .ask-it .ask-cm-need, :root[data-theme="light"] .ask-it .ask-cm-more { background: var(--color-primary-tint, rgba(51, 144, 236, .15)); color: var(--color-primary); } :root[data-theme="light"] .ask-cm-cnt { color: var(--color-text-secondary); } :root[data-theme="light"] .ask-cm-cnt.over { color: #d33; } /* the own-wall field in the light theme: a light glass, dark words (2026-09-29, the user: «не видно») */ :root[data-theme="light"] .ask-compose .field { background: rgba(255, 255, 255, .92); box-shadow: 0 .125rem .625rem rgba(0, 0, 0, .12), inset 0 0 0 .5px rgba(0, 0, 0, .06); } :root[data-theme="light"] .ask-compose textarea { color: var(--color-text); caret-color: var(--color-primary); } :root[data-theme="light"] .ask-compose textarea::placeholder { color: var(--color-text-secondary); } /* my own head on «Стіна», super compact (2026-09-29, the user: «чтобы занимал очень мало экрана»): one row — face, name and tag, three round icon buttons; under it a thin row — views, place, rating. No prompt line. */ .ask-panel .ask-top.own { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head acts" "meta rate"; align-items: center; column-gap: .5rem; row-gap: .375rem; padding: .5rem .75rem .5rem; } .ask-panel .ask-top.own .head { grid-area: head; gap: .5rem; min-width: 0; padding-right: 0; } .ask-panel .ask-top.own .avatar.hero { width: 2.5rem; height: 2.5rem; font-size: 1.125rem; box-shadow: 0 0 0 .125rem rgba(255, 255, 255, .85); } .ask-panel .ask-top.own .avatar.hero img { width: 100%; height: 100%; } .ask-panel .ask-top.own .t b { font-size: .9375rem; } .ask-panel .ask-top.own .t .sub { font-size: .6875rem; } .ask-panel .ask-top.own .meta { grid-area: meta; margin: 0; gap: .375rem; } .ask-panel .ask-top.own .meta > * { height: 1.25rem; margin-top: 0; padding: 0 .5rem; font-size: .625rem; } .ask-panel .ask-top.own .meta > * svg { width: .75rem; height: .75rem; } .ask-panel .ask-top.own > .ask-rate.corner.corner { position: static; grid-area: rate; justify-self: end; height: 1.25rem; font-size: .6875rem; } .ask-panel .ask-top.own > .ask-rate.corner .flame { width: .875rem; height: .875rem; } .ask-panel .ask-top.own .line, .ask-panel .ask-top.own .line-more { display: none; } .ask-panel .ask-top.own .ask-tiles { grid-area: acts; display: flex; gap: .25rem; margin: 0; width: auto; } .ask-panel .ask-top.own .ask-tiles .tile { flex: none; width: 2rem; height: 2rem; padding: 0; border-radius: 50%; gap: 0; } .ask-panel .ask-top.own .ask-tiles .tile span { display: none; } .ask-panel .ask-top.own .ask-tiles .tile svg { width: 1rem; height: 1rem; } .wask > .ask-panel .ask-top.own { transition: none; transform: none !important; } /* never folds: it is small already (2026-09-29) */ /* a stranger's head folded (2026-09-29, the user): the three buttons stay in the strip as round icons on the right, the rating pill slides left to make room */ .ask-top.folded .ask-tiles.three { opacity: 1; pointer-events: auto; position: absolute; right: .75rem; top: calc(var(--fold, 0px) + 1.125rem); z-index: 3; display: flex; flex-direction: row; gap: .25rem; margin: 0; width: auto; } .ask-top.folded .ask-tiles.three .trow { display: contents; } .ask-top.folded .ask-tiles.three .tile, .ask-top.folded .ask-tiles.three .tile.signed { flex: none; width: 2rem; height: 2rem; padding: 0; border-radius: 50%; gap: 0; } .ask-top.folded .ask-tiles.three .tile span { display: none; } .ask-top.folded .ask-tiles.three .tile svg { width: 1rem; height: 1rem; } .ask-top.folded .ask-tiles.three .tile .avatar.mini { width: 1.25rem; height: 1.25rem; } .ask-top.folded > .ask-rate.corner.corner { transform: translateY(var(--fold, 0px)) translateX(-7rem); } .ask-top.folded .head .t { padding-right: 10.5rem; } /* …in the corner, under the rating (2026-09-29, the user): the pill stays top-right and shrinks, the icons sit right under it */ .ask-top.folded > .ask-rate.corner.corner { transform: translateY(var(--fold, 0px)); top: .375rem; height: 1.25rem; font-size: .6875rem; padding: 0 .5rem 0 .375rem; } .ask-top.folded > .ask-rate.corner .flame { width: .875rem; height: .875rem; } .ask-top.folded .ask-tiles.three { top: calc(var(--fold, 0px) + 1.875rem); gap: .3125rem; } .ask-top.folded .ask-tiles.three .tile, .ask-top.folded .ask-tiles.three .tile.signed { width: 1.75rem; height: 1.75rem; } .ask-top.folded .ask-tiles.three .tile svg { width: .9375rem; height: .9375rem; } .ask-top.folded .ask-tiles.three .tile .avatar.mini { width: 1.125rem; height: 1.125rem; } .ask-top.folded .head .t { padding-right: 6.5rem; } /* the bell in the header (2026-09-29) */ .hbell { position: relative; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; background: var(--color-background-secondary); color: var(--color-text); } .hbell svg { width: 1.25rem; height: 1.25rem; } .hbell.hot { color: var(--color-primary); } .hbell i.n { position: absolute; top: -.125rem; right: -.25rem; min-width: 1.125rem; height: 1.125rem; padding: 0 .3125rem; border-radius: .5625rem; background: #ff3b30; color: #fff; font-style: normal; font-size: .6875rem; font-weight: 700; line-height: 1.125rem; text-align: center; box-shadow: 0 0 0 2px var(--color-background); } /* the card from the top */ .push-card { position: fixed; top: calc(var(--safe-top, 0px) + .5rem); left: .625rem; right: .625rem; z-index: 1650; display: flex; align-items: center; gap: .75rem; padding: .75rem .875rem .75rem .75rem; border-radius: 1.25rem; background: var(--color-background); color: var(--color-text); box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .28), 0 0 0 .5px rgba(0, 0, 0, .08); transform: translateY(calc(-100% - 1.5rem)); opacity: 0; transition: transform .42s cubic-bezier(.2, .9, .25, 1.15), opacity .25s ease; cursor: pointer; } .push-card.open { transform: none; opacity: 1; } .push-card .pt { flex: 1; min-width: 0; line-height: 1.25; } .push-card .pt b { display: block; font-size: .9375rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .push-card .pt span { display: block; margin-top: .125rem; font-size: .8125rem; color: var(--color-text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .push-card .arrow { flex: none; width: .5rem; height: .5rem; border-right: 2px solid var(--color-text-secondary); border-top: 2px solid var(--color-text-secondary); transform: rotate(45deg); opacity: .6; } .nt-face { position: relative; width: 2.5rem; height: 2.5rem; font-size: 1rem; flex: none; overflow: visible; } .nt-face.big { width: 2.875rem; height: 2.875rem; font-size: 1.125rem; } .nt-face.sign { background: linear-gradient(135deg, #8b7cff, #5a3fd6); color: #fff; font-size: 1.25rem; display: grid; place-items: center; } .nt-face .sign { position: absolute; right: -.25rem; bottom: -.25rem; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--color-background); font-style: normal; font-size: .6875rem; line-height: 1.125rem; text-align: center; box-shadow: 0 0 0 1.5px var(--color-background); } /* the list */ .nt-list { padding: 0 0 1.5rem; } .nt-day { padding: .875rem .875rem .375rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-secondary); } .nt-row { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .625rem .875rem; text-align: left; background: var(--color-background); color: var(--color-text); border-bottom: .5px solid var(--color-borders); } .nt-row.new { background: var(--color-primary-tint, rgba(51, 144, 236, .08)); } .nt-row .tx { flex: 1; min-width: 0; line-height: 1.25; } .nt-row .tx b { display: block; font-size: .9375rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nt-row .tx span { display: block; margin-top: .125rem; font-size: .8125rem; color: var(--color-text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .nt-row time { flex: none; align-self: flex-start; margin-top: .125rem; font-size: .6875rem; color: var(--color-text-secondary); } .ask-it.lit { animation: ask-lit 1.8s ease-out; } @keyframes ask-lit { 0%, 35% { box-shadow: 0 0 0 3px var(--color-primary), 0 .5rem 1.5rem rgba(51, 144, 236, .35); } 100% { box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .08); } } .ask-setup .ask-tagrow { margin: .25rem 0 0; } /* the bell's number sits outside the clipped button (2026-09-29) */ .hbell-wrap { position: relative; flex: none; display: inline-block; } .hbell-wrap i.n { position: absolute; top: -.25rem; right: -.375rem; min-width: 1.125rem; height: 1.125rem; padding: 0 .3125rem; border-radius: .5625rem; background: #ff3b30; color: #fff; font-style: normal; font-size: .6875rem; font-weight: 700; line-height: 1.125rem; text-align: center; box-shadow: 0 0 0 2px var(--color-background); pointer-events: none; z-index: 1; } .nt-row.gone { animation: card-gone .26s ease-in forwards; pointer-events: none; } /* the push card, glass (2026-09-29, the user: «прозрачнее и красивее»): frosted, a hairline, a soft glow */ .push-card { background: color-mix(in srgb, var(--color-background) 72%, transparent); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); border-radius: 1.375rem; box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .22), inset 0 0 0 .5px rgba(255, 255, 255, .35), 0 0 0 .5px rgba(0, 0, 0, .08); } :root[data-theme="dark"] .push-card { background: color-mix(in srgb, var(--color-background) 62%, transparent); box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .5), inset 0 0 0 .5px rgba(255, 255, 255, .14); } .push-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(120deg, rgba(139, 124, 255, .18), transparent 45%, rgba(51, 144, 236, .14)); pointer-events: none; } .push-card > * { position: relative; } .push-card .nt-face.big { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .18); } /* the rating window, v4 (2026-09-29): one small block — number, place, the buy capsule, four lines */ .rt-info.v4 { display: flex; flex-direction: column; gap: .625rem; } .rt-info.v4 .rt-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: 0; padding: .75rem .875rem; } .rt-info.v4 .rt-num { display: flex; align-items: center; gap: .375rem; } .rt-info.v4 .rt-num b { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; } .rt-info.v4 .rt-num .flame, .rt-info.v4 .rt-num svg { width: 1.5rem; height: 1.5rem; } .rt-info.v4 .rt-place { text-align: right; line-height: 1.15; } .rt-info.v4 .rt-place b { display: block; font-size: 1.0625rem; font-weight: 800; } .rt-info.v4 .rt-place span { font-size: .75rem; opacity: .85; } .rt-buy { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: .5rem; height: 2.75rem; border-radius: 1.375rem; color: #1a1200; font-size: .9375rem; font-weight: 800; background: linear-gradient(135deg, #ffe08a, #ffb300 55%, #ff8a00); box-shadow: 0 .5rem 1.25rem rgba(255, 160, 0, .35); } .rt-buy .star { font-size: 1.125rem; } .rt-buy svg { width: 1rem; height: 1rem; opacity: .7; } .rt-buy::after { content: ""; position: absolute; top: -50%; left: -60%; width: 40%; height: 200%; background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .5), transparent); transform: skewX(-20deg); animation: cta-shine 3.2s ease-in-out infinite; pointer-events: none; } .rt-how { display: flex; flex-direction: column; gap: .3125rem; padding: .625rem .75rem; border-radius: .875rem; background: var(--color-background-secondary); } .rt-how > b { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-secondary); margin-bottom: .125rem; } .rt-line { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; line-height: 1.25; } .rt-line .ic { width: 1.25rem; text-align: center; flex: none; } .rt-line .tx { flex: 1; min-width: 0; } .rt-line .pts { flex: none; font-weight: 700; color: var(--color-primary); } .rt-line.done { opacity: .55; } .rt-line.done .pts { color: #34c759; } .rt-info.v4 .rt-note { margin: 0; font-size: .75rem; color: var(--color-text-secondary); text-align: center; } /* the shop */ .rt-shop { display: flex; flex-direction: column; gap: .75rem; } .rt-shop-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .25rem; padding: 1.125rem 1rem 1rem; border-radius: 1.125rem; color: #fff; background: radial-gradient(120% 120% at 100% 0%, #3a2a7a 0%, #1b1440 50%, #0d0a24 100%); box-shadow: 0 .75rem 2rem rgba(20, 10, 60, .45); } .rt-shop-hero .glow { position: absolute; inset: -40% -20%; background: radial-gradient(40% 40% at 50% 45%, rgba(255, 190, 60, .35), transparent 70%); pointer-events: none; } .rt-shop-hero .big { position: relative; font-size: 2.5rem; line-height: 1; filter: drop-shadow(0 0 .75rem rgba(255, 200, 80, .8)); } .rt-shop-hero b { position: relative; font-size: 1.1875rem; font-weight: 800; letter-spacing: -.02em; } .rt-shop-hero span { position: relative; font-size: .8125rem; opacity: .85; line-height: 1.35; } .rt-packs { display: flex; flex-direction: column; gap: .5rem; } .rt-pack { position: relative; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem .875rem; border-radius: 1rem; background: var(--color-background-secondary); color: var(--color-text); text-align: left; box-shadow: inset 0 0 0 1px var(--color-borders); } .rt-pack.hot { background: linear-gradient(135deg, rgba(255, 200, 80, .22), rgba(255, 140, 0, .12)); box-shadow: inset 0 0 0 1.5px #ffb300; } .rt-pack .l b { display: block; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; } .rt-pack .l span { font-size: .75rem; color: var(--color-text-secondary); } .rt-pack .r { text-align: right; } .rt-pack .r b { display: block; font-size: 1rem; font-weight: 800; } .rt-pack .r i { display: inline-block; margin-top: .125rem; padding: 0 .375rem; border-radius: .5rem; background: #34c759; color: #fff; font-style: normal; font-size: .6875rem; font-weight: 700; } .rt-pack .tag { position: absolute; top: -.5rem; left: .875rem; padding: 0 .5rem; border-radius: .5rem; background: #ffb300; color: #1a1200; font-style: normal; font-size: .625rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; } .rt-pack.busy { opacity: .6; pointer-events: none; } .rt-fine { font-size: .6875rem; color: var(--color-text-secondary); text-align: center; } .rt-packs { padding-top: .375rem; } .rt-pack { overflow: visible; transition: transform .12s ease; } .rt-pack:active { transform: scale(.985); } /* the rating window and the shop, prettier (2026-09-29, the user: «скучные и не красивые») */ .rt-info.v4 .rt-head { position: relative; overflow: hidden; align-items: flex-end; padding: 1rem 1rem .875rem; border-radius: 1.125rem; background: radial-gradient(120% 140% at 0% 0%, #8b7cff 0%, #5a3fd6 45%, #2a1c6e 100%); box-shadow: 0 .75rem 1.75rem rgba(60, 40, 160, .35); margin: 0; } .rt-info.v4 .rt-head .glow { position: absolute; right: -20%; top: -60%; width: 70%; height: 160%; background: radial-gradient(50% 50% at 50% 50%, rgba(255, 200, 80, .45), transparent 70%); pointer-events: none; } .rt-info.v4 .rt-head .pat { position: absolute; inset: 0; background: url("pattern.svg") center / 18rem; opacity: .08; pointer-events: none; } .rt-info.v4 .rt-num { position: relative; align-items: baseline; gap: .5rem; } .rt-info.v4 .rt-num b { font-size: 2.5rem; line-height: 1; font-weight: 900; letter-spacing: -.03em; text-shadow: 0 .25rem 1rem rgba(0, 0, 0, .25); } .rt-info.v4 .rt-num .flame, .rt-info.v4 .rt-num svg { width: 1.75rem; height: 1.75rem; align-self: center; filter: drop-shadow(0 0 .5rem rgba(255, 210, 120, .8)); } .rt-info.v4 .rt-num .lbl { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; opacity: .8; } .rt-info.v4 .rt-place { position: relative; padding: .375rem .625rem; border-radius: .75rem; background: rgba(255, 255, 255, .16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .3); } .rt-info.v4 .rt-place b { font-size: 1.125rem; } .rt-buy { height: 3rem; font-size: 1rem; box-shadow: 0 .625rem 1.5rem rgba(255, 160, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .55); } .rt-how { gap: .375rem; padding: .75rem .75rem; border-radius: 1rem; background: var(--color-background-secondary); box-shadow: inset 0 0 0 .5px var(--color-borders); } .rt-line { gap: .625rem; font-size: .8438rem; } .rt-line .ic { width: 1.75rem; height: 1.75rem; border-radius: .5625rem; display: grid; place-items: center; font-size: .9375rem; background: var(--color-background); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); } .rt-line .ic.t1 { background: linear-gradient(135deg, #ffe3a3, #ffc46b); } .rt-line .ic.t2 { background: linear-gradient(135deg, #cfe6ff, #9ccbff); } .rt-line .ic.t4 { background: linear-gradient(135deg, #d9f5e3, #9fe3bb); } .rt-line .ic.t5 { background: linear-gradient(135deg, #f0dcff, #d4b3ff); } .rt-line .pts { padding: .125rem .5rem; border-radius: .625rem; background: var(--color-primary-tint, rgba(51, 144, 236, .12)); color: var(--color-primary); font-size: .75rem; } .rt-line.done .pts { background: rgba(52, 199, 89, .14); color: #2aa34a; } /* the shop */ .rt-shop-hero { padding: 1.375rem 1rem 1.125rem; border-radius: 1.25rem; background: radial-gradient(110% 120% at 85% 0%, #5b3fe0 0%, #2a1c6e 40%, #120c33 100%); } .rt-shop-hero .glow { inset: -30% -10%; background: radial-gradient(35% 35% at 50% 40%, rgba(255, 190, 60, .5), transparent 70%); } .rt-shop-hero::after { content: ""; position: absolute; inset: 0; background: url("pattern.svg") center / 16rem; opacity: .08; pointer-events: none; } .rt-shop-hero .big { font-size: 3rem; animation: rt-float 3s ease-in-out infinite; } @keyframes rt-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.25rem); } } .rt-shop-hero b { font-size: 1.3125rem; } .rt-pack { padding: .875rem 1rem; border-radius: 1.125rem; background: var(--color-background); box-shadow: 0 .25rem .875rem rgba(0, 0, 0, .06), inset 0 0 0 1px var(--color-borders); } .rt-pack .l b { font-size: 1.5rem; font-weight: 900; letter-spacing: -.03em; background: linear-gradient(135deg, #8b7cff, #3390ec); -webkit-background-clip: text; background-clip: text; color: transparent; } .rt-pack .r b { display: inline-flex; align-items: center; gap: .25rem; padding: .3125rem .75rem; border-radius: 1rem; background: linear-gradient(135deg, #ffe08a, #ffb300); color: #1a1200; font-size: .9375rem; box-shadow: 0 .25rem .625rem rgba(255, 160, 0, .3); } .rt-pack .r i { margin-top: .3125rem; } .rt-pack.hot { background: linear-gradient(135deg, rgba(255, 210, 90, .18), rgba(139, 124, 255, .14)); box-shadow: 0 .5rem 1.25rem rgba(255, 160, 0, .18), inset 0 0 0 1.5px #ffb300; } .rt-pack.hot .l b { background: linear-gradient(135deg, #ff9a00, #ffcf4d); -webkit-background-clip: text; background-clip: text; } .rt-pack .tag { top: -.625rem; padding: .125rem .625rem; border-radius: .625rem; box-shadow: 0 .25rem .5rem rgba(255, 160, 0, .35); } :root[data-theme="dark"] .rt-pack { background: var(--color-background-secondary); } /* the shop, v3 (2026-09-29, the user: «анимировать красиво, кнопки покупки круче»): cards slide in one after another, a sweep of light runs over them, the pay pill is a gold button, the popular card breathes */ .rt-shop-hero .sp { position: absolute; width: .375rem; height: .375rem; border-radius: 50%; background: #fff; box-shadow: 0 0 .5rem 2px rgba(255, 220, 120, .9); opacity: 0; transform: scale(var(--s, .8)); animation: rt-twinkle 2.6s ease-in-out infinite; pointer-events: none; } @keyframes rt-twinkle { 0%, 100% { opacity: 0; transform: scale(.3); } 50% { opacity: 1; transform: scale(var(--s, .8)); } } .rt-shop-hero .big { filter: drop-shadow(0 0 1rem rgba(255, 200, 80, .95)); animation: rt-float 2.6s ease-in-out infinite; } .rt-shop-hero, .rt-packs .rt-pack, .rt-fine { animation: rt-in .5s cubic-bezier(.2, .9, .25, 1.1) both; } .rt-packs .rt-pack:nth-child(1) { animation-delay: .08s; } .rt-packs .rt-pack:nth-child(2) { animation-delay: .18s; } .rt-packs .rt-pack:nth-child(3) { animation-delay: .28s; } .rt-fine { animation-delay: .4s; } @keyframes rt-in { from { opacity: 0; transform: translateY(1rem) scale(.97); } to { opacity: 1; transform: none; } } .rt-pack { position: relative; overflow: hidden; padding: 1rem 1rem 1rem 1.125rem; border-radius: 1.25rem; color: #fff; background: linear-gradient(135deg, #2b2358, #17123a); box-shadow: 0 .625rem 1.5rem rgba(20, 10, 60, .35), inset 0 0 0 1px rgba(255, 255, 255, .08); transition: transform .15s ease, box-shadow .15s ease; } .rt-pack:active { transform: scale(.97); } .rt-pack .sheen { position: absolute; top: -60%; left: -70%; width: 45%; height: 220%; background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .16), transparent); transform: skewX(-20deg); animation: rt-sheen 4.2s ease-in-out infinite; pointer-events: none; } .rt-packs .rt-pack:nth-child(2) .sheen { animation-delay: 1.2s; } .rt-packs .rt-pack:nth-child(3) .sheen { animation-delay: 2.4s; } @keyframes rt-sheen { 0%, 55% { left: -70%; } 100% { left: 150%; } } .rt-pack .l b { font-size: 1.75rem; font-weight: 900; letter-spacing: -.03em; background: linear-gradient(135deg, #cfc4ff, #8ec1ff); -webkit-background-clip: text; background-clip: text; color: transparent; } .rt-pack .l span { color: rgba(255, 255, 255, .7); } .rt-pack .r.pay { position: relative; display: inline-flex; align-items: center; gap: .3125rem; height: 2.5rem; padding: 0 1rem 0 1.125rem; border-radius: 1.25rem; background: linear-gradient(135deg, #ffe08a 0%, #ffb300 55%, #ff8a00 100%); color: #1a1200; font-size: 1.0625rem; font-weight: 800; box-shadow: 0 .5rem 1.125rem rgba(255, 160, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .6); text-align: left; } .rt-pack .r.pay .st { font-size: 1.125rem; filter: drop-shadow(0 0 .25rem rgba(255, 255, 255, .7)); } .rt-pack .r.pay::after { content: ""; position: absolute; top: -50%; left: -60%; width: 40%; height: 200%; background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg); animation: cta-shine 3.4s ease-in-out infinite; pointer-events: none; } .rt-pack.hot { background: linear-gradient(135deg, #3a2a7a, #1b1440); box-shadow: 0 .75rem 1.75rem rgba(255, 160, 0, .28), inset 0 0 0 1.5px #ffc233; animation: rt-in .5s cubic-bezier(.2, .9, .25, 1.1) both, rt-breathe 2.8s ease-in-out .6s infinite; } @keyframes rt-breathe { 0%, 100% { box-shadow: 0 .75rem 1.75rem rgba(255, 160, 0, .22), inset 0 0 0 1.5px #ffc233; } 50% { box-shadow: 0 .875rem 2.25rem rgba(255, 160, 0, .5), inset 0 0 0 2px #ffe08a; } } .rt-pack.hot .l b { background: linear-gradient(135deg, #ffe08a, #ffb300); -webkit-background-clip: text; background-clip: text; } .rt-pack .tag { top: .625rem; left: auto; right: 1rem; z-index: 1; background: #fff; color: #7a4a00; } .rt-pack.busy { opacity: .55; } :root[data-theme="dark"] .rt-pack { background: linear-gradient(135deg, #2b2358, #17123a); } /* the capsule in the rating window breathes too */ .rt-buy { animation: rt-buy-breathe 2.8s ease-in-out infinite; } @keyframes rt-buy-breathe { 0%, 100% { box-shadow: 0 .625rem 1.5rem rgba(255, 160, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .55); transform: none; } 50% { box-shadow: 0 .75rem 2rem rgba(255, 160, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .55); transform: scale(1.015); } } .rt-pack.hot { padding-top: 1.75rem; } .rt-pack .tag { top: .5rem; left: 1.125rem; right: auto; } /* the tag above the number, not over the pay pill (2026-09-29) */ /* the shop, v4 (2026-09-29): the lightning is the rating, the star is the price; three cards in a row */ .rt-buy .flame { width: 1.375rem; height: 1.375rem; filter: drop-shadow(0 0 .375rem rgba(255, 255, 255, .6)); } .rt-shop-hero .big { display: grid; place-items: center; animation: rt-float 2.6s ease-in-out infinite; filter: none; } .rt-shop-hero .big .flame { width: 4rem; height: 4rem; filter: drop-shadow(0 0 1rem rgba(255, 170, 60, .9)); } .rt-packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; padding-top: .625rem; } .rt-pack, .rt-pack.hot { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .25rem; padding: 1rem .5rem .625rem; border-radius: 1.125rem; overflow: visible; color: #fff; text-align: center; background: linear-gradient(160deg, #2b2358, #17123a); box-shadow: 0 .625rem 1.5rem rgba(20, 10, 60, .35), inset 0 0 0 1px rgba(255, 255, 255, .08); transition: transform .15s ease; } .rt-pack .sheen { display: none; } .rt-pack .ic { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; } .rt-pack .ic .flame { width: 2.25rem; height: 2.25rem; filter: drop-shadow(0 .25rem .625rem rgba(255, 150, 40, .55)); } .rt-pack .n { display: block; font-size: 1.375rem; font-weight: 900; letter-spacing: -.03em; line-height: 1.1; background: linear-gradient(135deg, #fff, #cfc4ff); -webkit-background-clip: text; background-clip: text; color: transparent; } .rt-pack .sub { font-size: .6875rem; color: rgba(255, 255, 255, .7); white-space: nowrap; } .rt-pack .pay { position: relative; overflow: hidden; margin-top: .5rem; display: inline-flex; align-items: center; justify-content: center; gap: .25rem; width: 100%; height: 2.25rem; border-radius: 1.125rem; background: linear-gradient(135deg, #ffe08a 0%, #ffb300 55%, #ff8a00 100%); color: #1a1200; font-size: .9375rem; font-weight: 800; box-shadow: 0 .375rem .875rem rgba(255, 160, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .6); } .rt-pack .pay .st { font-size: 1rem; } .rt-pack .pay::after { content: ""; position: absolute; top: -50%; left: -60%; width: 40%; height: 200%; background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg); animation: cta-shine 3.4s ease-in-out infinite; pointer-events: none; } .rt-pack.hot { padding-top: 1rem; background: linear-gradient(160deg, #4a35a8, #1b1440); box-shadow: 0 .75rem 1.75rem rgba(255, 160, 0, .28), inset 0 0 0 1.5px #ffc233; transform: translateY(-.25rem); } .rt-pack.hot:active { transform: translateY(-.25rem) scale(.97); } .rt-pack.hot .n { background: linear-gradient(135deg, #ffe08a, #ffb300); -webkit-background-clip: text; background-clip: text; } .rt-pack .tag { position: absolute; top: -.5rem; left: 50%; right: auto; transform: translateX(-50%); padding: .125rem .5rem; border-radius: .5rem; background: #ffb300; color: #1a1200; font-style: normal; font-size: .625rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; box-shadow: 0 .25rem .5rem rgba(255, 160, 0, .35); z-index: 1; } :root[data-theme="dark"] .rt-pack { background: linear-gradient(160deg, #2b2358, #17123a); } /* the star drawn, the discount as a corner badge, the badge in the hero glows instead of bobbing (2026-09-29) */ .rt-pack .pay .star { width: 1.125rem; height: 1.125rem; flex: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); } .rt-pack .off { position: absolute; top: .375rem; right: .375rem; padding: .125rem .375rem; border-radius: .5rem; background: #34c759; color: #fff; font-style: normal; font-size: .625rem; font-weight: 800; letter-spacing: .02em; box-shadow: 0 .125rem .375rem rgba(0, 0, 0, .25); z-index: 1; } .rt-pack.hot .off { top: .875rem; } .rt-shop-hero .big { animation: rt-glow 2.8s ease-in-out infinite; } .rt-shop-hero .big .flame { animation: none; } @keyframes rt-glow { 0%, 100% { filter: drop-shadow(0 0 .5rem rgba(255, 170, 60, .55)); } 50% { filter: drop-shadow(0 0 1.25rem rgba(255, 190, 80, 1)); } } /* the hit's ring outside the card, the discount level with the lightning (2026-09-29, the user) */ .rt-pack.hot, .rt-pack.hot:active { box-shadow: 0 0 0 2px #ffc233, 0 .75rem 1.75rem rgba(255, 160, 0, .32); } @keyframes rt-breathe { 0%, 100% { box-shadow: 0 0 0 2px #ffc233, 0 .75rem 1.75rem rgba(255, 160, 0, .25); } 50% { box-shadow: 0 0 0 2.5px #ffe08a, 0 .875rem 2.25rem rgba(255, 160, 0, .5); } } .rt-pack .off, .rt-pack.hot .off { top: 1.6875rem; right: .375rem; height: 1.125rem; line-height: 1.125rem; padding: 0 .375rem; } .rt-pack:has(.off) .ic { align-self: flex-start; margin-left: .25rem; } /* the lightning left, the discount right, one line (2026-09-29) */ /* a hidden wall's page (2026-09-29): the name and the face, nothing else */ .ask-top.hidden .line, .ask-top.hidden .line-more, .ask-top.hidden .meta, .ask-top.hidden > .ask-rate.corner { display: none; } .ask-blocked.quiet { background: rgba(255, 255, 255, .14); color: #fff; } /* the medal in the head's corner, the place pill compact (2026-09-29) */ .rt-info.v4 .rt-medal { position: absolute; top: .375rem; right: .5rem; font-style: normal; font-size: 1.5rem; line-height: 1; filter: drop-shadow(0 .25rem .5rem rgba(0, 0, 0, .35)); animation: rt-medal .6s cubic-bezier(.2, .9, .25, 1.2) both; } @keyframes rt-medal { from { transform: scale(.4) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } } .rt-info.v4 .rt-head:has(.rt-medal) .rt-place { margin-top: 1.5rem; } .rt-info.v4 .rt-place { flex: none; white-space: nowrap; } .rt-info.v4 .rt-place span { font-size: .6875rem; } /* the welcome: «use my Telegram name» under the field (2026-09-29) */ .wl-tg { display: inline-flex; align-items: center; gap: .375rem; margin-top: .5rem; height: 1.875rem; padding: 0 .75rem 0 .5rem; border-radius: .9375rem; background: var(--color-primary-tint, rgba(51, 144, 236, .12)); color: var(--color-primary); font-size: .8125rem; font-weight: 600; max-width: 100%; } .wl-tg svg { width: 1rem; height: 1rem; flex: none; } .wl-tg span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wl-tg.done { background: rgba(52, 199, 89, .14); color: #2aa34a; } /* the head on a phone (2026-09-29): «рейтинг» goes under the number, so the place pill has room and is never cut */ .rt-info.v4 .rt-num { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; row-gap: 0; } .rt-info.v4 .rt-num .lbl { flex-basis: 100%; margin-top: .125rem; } .rt-info.v4 .rt-place { flex: none; margin-left: .5rem; } .rt-info.v4 .rt-head:has(.rt-medal) .rt-place { margin-top: 0; } .rt-info.v4 .rt-medal { top: .5rem; right: .625rem; } .rt-info.v4 .rt-head { padding-right: .875rem; } .rt-info.v4 .rt-head:has(.rt-medal) { padding-top: 1.125rem; } .rt-info.v4 .rt-head:has(.rt-medal) .rt-num { padding-top: 1.25rem; } .ask-blocked.byme { display: flex; align-items: center; justify-content: space-between; gap: .625rem; } .ask-blocked.byme span { flex: 1; min-width: 0; font-size: .8125rem; line-height: 1.3; } .ask-blocked.byme .btn.small { flex: none; height: 2rem; padding: 0 .875rem; border-radius: 1rem; font-size: .8125rem; } /* the «closed» / «blocked» word on the head, readable on any colour (2026-09-29) */ .ask-top .ask-blocked { margin-top: .625rem; padding: .625rem .75rem; border-radius: .875rem; background: rgba(0, 0, 0, .38); color: #fff; font-size: .8438rem; line-height: 1.3; font-weight: 600; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .ask-top .ask-blocked.quiet { background: rgba(0, 0, 0, .3); font-weight: 500; } .ask-blocked.byme .btn.small { background: #fff; color: #1b1440; } /* the Stars funnel in the admin (2026-09-29) */ .st-row.paid .subtitle .last { color: #2aa34a; font-weight: 700; } .st-row.invoice .subtitle .last { color: var(--color-primary); font-weight: 600; } .st-row.open .avatar, .st-row.pack .avatar { opacity: .8; } /* my compact head: the rating in the meta row, the place pill in the corner (2026-09-29) */ .ask-panel .ask-top.own > .ask-place.corner { grid-area: rate; justify-self: end; position: relative; z-index: 1; margin: 0; height: 1.25rem; padding: 0 .5rem; font-size: .625rem; } .ask-panel .ask-top.own > .ask-place.corner svg { width: .75rem; height: .75rem; } .ask-panel .ask-top.own .meta .ask-rate { height: 1.25rem; padding: 0 .5rem 0 .375rem; font-size: .6875rem; margin: 0; } .ask-panel .ask-top.own .meta .ask-rate .flame { width: .875rem; height: .875rem; } /* «твій рейтинг» pill in my head: lit, labelled (2026-09-29) */ .ask-panel .ask-top.own .meta .ask-rate.mine { height: 1.5rem; padding: 0 .625rem 0 .4375rem; gap: .3125rem; font-size: .8125rem; background: linear-gradient(135deg, #ffe08a, #ffb300 60%, #ff8a00); color: #1a1200; box-shadow: 0 .25rem .75rem rgba(255, 160, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .55); } .ask-panel .ask-top.own .meta .ask-rate.mine b { font-weight: 900; } .ask-panel .ask-top.own .meta .ask-rate.mine .lbl { font-size: .625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .8; } .ask-panel .ask-top.own .meta .ask-rate.mine .flame { width: 1rem; height: 1rem; } .ask-panel .ask-top.own > .ask-place.none { opacity: .85; } /* my head: row 1 = face, name, the three round buttons on the right; row 2 = views and the rating, full width (2026-09-29) */ .ask-panel .ask-top.own { grid-template-areas: "head acts" "meta meta"; } .ask-panel .ask-top.own .ask-tiles { align-self: center; } /* the compact rating window's button to the full rules, and the rules window (2026-09-29) */ .rt-all { display: flex; align-items: center; justify-content: center; gap: .25rem; height: 2.25rem; border-radius: .75rem; background: var(--color-background-secondary); color: var(--color-primary); font-size: .875rem; font-weight: 600; } .rt-all svg { width: .875rem; height: .875rem; } .rt-rules { display: flex; flex-direction: column; gap: .375rem; } .rt-rsec { display: flex; flex-direction: column; gap: .0625rem; margin: .625rem .125rem .125rem; } .rt-rsec:first-child { margin-top: 0; } .rt-rsec b { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-secondary); } .rt-rsec span { font-size: .75rem; color: var(--color-text-secondary); opacity: .85; } .rt-rules .rt-line { padding: .5rem .625rem; border-radius: .875rem; background: var(--color-background-secondary); align-items: center; } .rt-rules .rt-line.off { opacity: .6; } .rt-rules .rt-line.off .pts { background: rgba(120, 120, 128, .18); color: var(--color-text-secondary); } .rt-rules .rt-line .ic.t0 { background: rgba(120, 120, 128, .18); } .rt-rules .rt-line .pts:empty { display: none; } .rt-rules .rt-note { margin-top: .25rem; font-size: .8125rem; line-height: 1.4; color: var(--color-text-secondary); } /* the compact window stays short on small screens (2026-09-29) */ .rt-info.v4 { gap: .5rem; } .rt-info.v4 .rt-head { padding: .75rem .875rem .625rem; } .rt-info.v4 .rt-num b { font-size: 2.125rem; } .rt-how { gap: .25rem; padding: .5rem .625rem; } .rt-line { font-size: .8125rem; } .rt-line .ic { width: 1.5rem; height: 1.5rem; font-size: .875rem; } .rt-buy { height: 2.75rem; } /* the full-rules window: a fixed box that scrolls (2026-09-29, the user) */ .modal-dialog.scroll .rt-rules { height: min(58vh, 26rem); overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translateZ(0); overscroll-behavior: contain; margin: 0 -.375rem; padding: 0 .375rem .5rem; mask-image: linear-gradient(to bottom, #000 calc(100% - 1rem), transparent); -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1rem), transparent); } .st-seg { margin: .5rem .75rem .375rem; } .st-row.on .subtitle .last { color: var(--color-text-secondary); } /* my own row in the top (2026-09-29) */ .ask-card.me { background: var(--color-primary-tint, rgba(51, 144, 236, .08)); } .ask-card .me-tag { display: inline-block; margin-left: .375rem; padding: 0 .375rem; border-radius: .5rem; background: var(--color-primary); color: #fff; font-size: .625rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; vertical-align: middle; } .acts-seg { display: flex; overflow-x: auto; scrollbar-width: none; } .acts-seg::-webkit-scrollbar { display: none; } .acts-seg button { flex: none; padding: 0 .625rem; } /* the walls capsule over the footer (2026-09-30): glass, three equal parts, above the write field when there is one */ .ask-bseg { display: none; position: absolute; left: .75rem; right: .75rem; bottom: calc(var(--tabbar-space) + .625rem); z-index: 6; } .wall-chat.asking .ask-bseg { display: block; } .ask-bseg .ask-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem; margin: 0; padding: .25rem; border-radius: 1.25rem; background: color-mix(in srgb, var(--color-background) 80%, transparent); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .18), inset 0 0 0 .5px rgba(255, 255, 255, .25); } .ask-bseg .ask-tabs button { height: 2.375rem; border-radius: 1rem; font-size: .8438rem; font-weight: 600; color: var(--color-text); background: transparent; box-shadow: none; text-shadow: none; } .ask-bseg .ask-tabs button.on { background: var(--color-primary); color: #fff; } .ask-bseg .ask-tabs button.on .n { background: #fff; color: var(--color-primary); } .wall-chat.asking .wask { padding-bottom: calc(var(--tabbar-space) + 4rem); } .wall-chat.asking.onwall.mine .wask { padding-bottom: calc(var(--tabbar-space) + 7.5rem); } .wall-chat.asking.onwall.mine .ask-compose { bottom: calc(var(--tabbar-space) + 3.625rem); } body.keyboard-visible .ask-bseg { display: none; } body.keyboard-visible .wall-chat.asking.onwall.mine .ask-compose { bottom: .75rem; } body.ctx-open .ask-bseg { opacity: 0; pointer-events: none; } /* my own wall (2026-09-30): the footer slides away, the write field and the capsule take its place; the capsule is the footer's glass */ #tabs { transition: transform .32s cubic-bezier(.32, .72, 0, 1), opacity .25s ease; } body.ownwall #tabs { transform: translateY(calc(100% + var(--tabbar-gap) + var(--safe-bottom) + .5rem)); opacity: 0; pointer-events: none; } .ask-bseg, .ask-compose { transition: bottom .32s cubic-bezier(.32, .72, 0, 1), opacity .2s ease, transform .2s ease; } .ask-bseg .ask-tabs { padding: .25rem; border-radius: 1.75rem; height: var(--tabbar-height); background: color-mix(in srgb, var(--color-tabbar) 72%, transparent); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .16), 0 0 0 .5px rgba(0, 0, 0, .08), inset 0 .5px 0 rgba(255, 255, 255, .5); } :root[data-theme="dark"] .ask-bseg .ask-tabs { box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .45), 0 0 0 .5px rgba(255, 255, 255, .12), inset 0 .5px 0 rgba(255, 255, 255, .08); } .ask-bseg .ask-tabs button { height: auto; border-radius: 1.5rem; } body.ownwall .wall-chat.asking .ask-bseg { bottom: calc(var(--safe-bottom) + var(--tabbar-gap)); } body.ownwall .wall-chat.asking.onwall.mine .ask-compose { bottom: calc(var(--safe-bottom) + var(--tabbar-gap) + var(--tabbar-height) + .5rem); } body.ownwall .wall-chat.asking.onwall.mine .wask { padding-bottom: calc(var(--safe-bottom) + var(--tabbar-gap) + var(--tabbar-height) + 4.25rem); } body.ownwall.keyboard-visible .wall-chat.asking.onwall.mine .ask-compose { bottom: .75rem; } /* the capsule bar nearly solid (2026-09-30, the user: «не настолько прозрачным») */ .ask-bseg .ask-tabs { background: color-mix(in srgb, var(--color-tabbar) 94%, transparent); } :root[data-theme="dark"] .ask-bseg .ask-tabs { background: color-mix(in srgb, var(--color-tabbar) 94%, transparent); } /* the capsule away while a field is in use; the write field drops into its place (2026-09-30) */ .ask-bseg.away { opacity: 0; pointer-events: none; transform: translateY(1.25rem); } body.keyboard-visible .wall-chat.asking.onwall.mine .ask-compose { bottom: .75rem; } /* the comment field grows with the words, paragraphs kept (2026-09-30) */ .ask-cm-form { align-items: flex-end; } .ask-cm-form textarea { flex: 1; min-width: 0; min-height: 2.375rem; max-height: 7.5rem; padding: .5625rem .875rem; border: 1.5px solid var(--color-borders); border-radius: 1.1875rem; background: var(--color-background); color: var(--color-text); font: inherit; font-size: .9375rem; line-height: 1.3; outline: 0; resize: none; } .ask-cm-form textarea:focus { border-color: var(--color-primary); } .ask-it .ask-cm-form textarea { background: rgba(255, 255, 255, .16); border-color: transparent; color: #fff; } .ask-it .ask-cm-form textarea::placeholder { color: rgba(255, 255, 255, .65); } .ask-it .ask-cm-form textarea:focus { border-color: rgba(255, 255, 255, .6); } :root[data-theme="light"] .ask-it .ask-cm-form textarea { background: var(--color-background-secondary, #f2f2f7); color: var(--color-text); } :root[data-theme="light"] .ask-it .ask-cm-form textarea::placeholder { color: var(--color-text-secondary); } :root[data-theme="light"] .ask-it .ask-cm-form textarea:focus { border-color: var(--color-primary); } .ask-cm-row .tx .t { white-space: pre-wrap; } /* cards in flight: 3D turn and a shadow that grows in the air (2026-09-30) */ .pc.fly { box-shadow: 0 .75rem 1.25rem rgba(0, 0, 0, .35), 0 0 0 .1rem rgba(255, 255, 255, .45); } .pc-flip { transform-style: preserve-3d; } .pc-flip > .pc { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 .75rem 1.25rem rgba(0, 0, 0, .35); } .pc-flip > .front-face { transform: rotateY(0deg); } .pc-flip > .back-face { transform: rotateY(180deg); } /* no hopping (2026-09-30, the user: «подпрыгивание уберём, вибрацию оставим»): the hand does not wave on my turn, the status bar does not pop, and a card on the table never slides/resizes after it has landed (the «дрожание» on a defence) */ .dk-hand.wave .pc { animation: none !important; } .dk-status.pop, .dk-bar.pop { animation: none !important; } .dk-board .slot .pc, .dk-board .slot .pc.d { transition: none !important; } .dk-board .slot .pc.pop, .dk-board .slot .pc.d.pop { animation: none !important; } /* a still table (2026-09-30, the user: «ничего на столе не должно меняться, всё сдвигается/сжимается»): the bout is a fixed 3×2 grid — cards fill it left to right, top to bottom, nothing re-centres or shrinks; the rows above the table keep one height whatever they say */ .dk-board { display: grid; grid-template-columns: repeat(3, calc(4.4rem * var(--bs))); grid-template-rows: repeat(2, calc(5.9rem * var(--bs))); justify-content: center; align-content: center; flex-wrap: nowrap; } .dk-board > .hintc { grid-column: 1 / -1; grid-row: 1 / -1; align-self: center; } .dk-status { height: 1.5rem; min-height: 0; line-height: 1.5rem; padding-top: 0; padding-bottom: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dk-opps { height: 6.75rem; min-height: 0; overflow: visible; } @media (max-height: 720px) { .dk-opps { height: 5.5rem; } } @media (max-height: 600px) { .dk-opps { height: 4rem; } } .dk-table.typing .dk-opps { height: auto; } /* the action bar keeps its height whatever it holds (2026-09-30, the user: «блок „твій хід“ і кнопки з'являються — карти їдуть вниз») */ .dk-bar { height: 3.25rem; min-height: 0; box-sizing: content-box; transition: opacity .15s ease; } .dk-bar.hold { opacity: 0; pointer-events: none; } .dk-bar[hidden] { display: flex !important; visibility: hidden; } @media (max-height: 720px) { .dk-bar { height: 2.75rem; } } /* a card on its way to my hand holds no place in the row yet (2026-09-30) */ .dk-hand .pc.incoming { display: none; } .dk-bar.hold { transition: none; } /* hiding is instant (a fade-out flashed the buttons); only the appearance fades in */ /* the game-over card, v2 (2026-09-30): a felt hero band with a glow, the places on white, one strong «Ще партію» */ .dk-over .card.v2 { padding: 0 0 1rem; overflow: hidden; } .dk-over .ohero { position: relative; overflow: hidden; padding: 1.25rem 1rem 1rem; margin-bottom: .875rem; color: #fff; background: radial-gradient(120% 90% at 50% 0%, var(--dk-felt-light) 0, var(--dk-felt) 55%, var(--dk-felt-dark) 100%); } .dk-over .card.lost .ohero { background: radial-gradient(120% 90% at 50% 0%, #c0392b 0, #8e2a22 55%, #4d1512 100%); } .dk-over .ohero .glow { position: absolute; left: 50%; top: -40%; width: 16rem; height: 16rem; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(255, 215, 110, .55), transparent); pointer-events: none; } .dk-over .ohero > * { position: relative; } .dk-over .ohero .big { font-size: 3.25rem; margin-bottom: .375rem; filter: drop-shadow(0 .375rem .75rem rgba(0, 0, 0, .35)); } .dk-over .ohero h2 { margin: 0; color: #fff; font-size: 1.375rem; } .dk-over .ohero .sub { display: block; margin-top: .25rem; font-size: .8125rem; opacity: .85; } .dk-over .card.v2 .places, .dk-over .card.v2 .myrt, .dk-over .card.v2 .acts { margin-left: 1rem; margin-right: 1rem; } .dk-over .card.v2 .prow { padding: .5rem .625rem; } .dk-over .card.v2 .prow:first-child { background: linear-gradient(135deg, rgba(255, 209, 102, .28), rgba(255, 179, 0, .12)); box-shadow: inset 0 0 0 1px rgba(255, 179, 0, .45); } .dk-over .card.v2 .prow .delta.up { color: #2aa34a; font-weight: 700; } .dk-over .card.v2 .prow .delta.down { color: #d33; font-weight: 700; } .dk-over .btn.again { height: 3rem; font-size: 1rem; font-weight: 800; background: linear-gradient(135deg, var(--dk-felt-light), var(--dk-felt)); color: #fff; box-shadow: 0 .5rem 1.25rem rgba(15, 74, 47, .35); } .dk-over .btn.again:disabled { opacity: .6; } /* the code box: the oval copies, its pill stands out from the felt */ .dk-wait .codebox .copy { display: inline-flex; align-items: center; gap: .375rem; margin-top: .375rem; height: 2rem; padding: 0 .875rem; border-radius: 1rem; background: #fff; color: var(--dk-felt-dark); font-size: .8125rem; font-weight: 700; box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .25); } .dk-wait .codebox .copy svg { width: 1rem; height: 1rem; } .dk-wait .tbl:active .codebox .copy { transform: scale(.96); } /* the lobby head, compact (2026-09-30): one title line, the two buttons side by side, no paragraph */ .dk-head { margin: .375rem .75rem .5rem; border-radius: 1.125rem; } .dk-head .hb { padding: .75rem .875rem .75rem; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; align-items: center; text-align: left; } .dk-head h2 { grid-column: 1 / -1; margin: 0; font-size: 1.0625rem; } .dk-head p { display: none; } .dk-head .btn.create, .dk-head .btn.code { width: 100%; height: 2.5rem; margin: 0; font-size: .875rem; } .dk-head .btn.code { background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .3); opacity: 1; } .dk-head .rec, .dk-head .who { grid-column: 1 / -1; margin-top: 0; justify-self: start; } /* (2026-09-30, the user) every capsule of the lobby head is the full width: the rating, «за столом як на стіні», the two buttons equal */ .dk-head .rec, .dk-head .who { justify-self: stretch; width: 100%; box-sizing: border-box; min-height: 2.75rem; } .dk-head .who { display: flex; justify-content: flex-start; padding: .375rem .75rem .375rem .375rem; border-radius: 1rem; } .dk-head .who span { flex: 1; min-width: 0; text-align: left; } .dk-head .rec { padding: .5rem .75rem; } /* other open tables in the waiting room (2026-09-30) */ .dk-wait .others { width: 100%; max-width: 22rem; margin: .5rem auto 0; padding: .625rem; box-sizing: border-box; border-radius: 1rem; background: rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 1px rgba(255, 215, 110, .35); animation: dkOthersIn .35s ease-out; } .dk-wait .others[hidden] { display: none; } .dk-wait .others .ocap { font-size: .75rem; font-weight: 700; color: var(--dk-gold); text-transform: uppercase; letter-spacing: .04em; margin: 0 .25rem .375rem; text-align: left; } .dk-wait .others .orow { display: flex; align-items: center; gap: .625rem; width: 100%; padding: .5rem; border: 0; border-radius: .75rem; background: rgba(255, 255, 255, .1); color: #fff; font: inherit; text-align: left; cursor: pointer; } .dk-wait .others .orow + .orow { margin-top: .375rem; } .dk-wait .others .orow:active { background: rgba(255, 255, 255, .18); } .dk-wait .others .oavs { display: flex; flex: none; } .dk-wait .others .oavs .avatar { width: 2rem; height: 2rem; font-size: .8125rem; box-shadow: 0 0 0 2px var(--dk-felt-dark); } .dk-wait .others .oavs .avatar + .avatar { margin-left: -.625rem; } .dk-wait .others .otxt { flex: 1; min-width: 0; display: flex; flex-direction: column; } .dk-wait .others .otxt b { font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dk-wait .others .otxt span { font-size: .75rem; opacity: .8; } .dk-wait .others .ogo { flex: none; height: 2rem; line-height: 2rem; padding: 0 .875rem; border-radius: 1rem; background: var(--dk-gold); color: #3a2a00; font-size: .8125rem; font-weight: 800; } @keyframes dkOthersIn { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: none; } } /* the other-table card floats over the top of the felt, the room below never moves (2026-09-30) */ .dk-wait { position: relative; } .dk-wait .others { position: absolute; z-index: 6; top: .5rem; left: 50%; width: calc(100% - 2rem); max-width: 22rem; margin: 0; transform: translateX(-50%); background: rgba(10, 45, 28, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 215, 110, .45), 0 .75rem 1.75rem rgba(0, 0, 0, .35); animation: dkOthersDrop .4s cubic-bezier(.2, .9, .3, 1.15); } .dk-wait .others .ocap { display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .dk-wait .others .ox { flex: none; width: 1.5rem; height: 1.5rem; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: .75rem; line-height: 1; cursor: pointer; } .dk-table.typing .dk-wait .others { display: none; } @keyframes dkOthersDrop { from { opacity: 0; transform: translate(-50%, -1rem) scale(.96); } to { opacity: 1; transform: translateX(-50%); } } /* ---- table effects (2026-09-30): the layer over everything, the jolts, the inventory in CS colours ---- */ .fx-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 9990; pointer-events: none; } .fx-lot { position: fixed; z-index: 9991; pointer-events: none; will-change: transform, opacity; filter: drop-shadow(0 .5rem 1rem rgba(0, 0, 0, .35)); } .fx-lot svg { display: block; } .fx-beam { position: fixed; z-index: 9989; pointer-events: none; opacity: 0; clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, rgba(160, 255, 170, .75), rgba(160, 255, 170, .12)); filter: blur(1px); } .fx-glow { position: fixed; inset: 0; z-index: 9988; pointer-events: none; background: radial-gradient(60% 45% at 50% 42%, rgba(255, 214, 90, .45), rgba(255, 170, 0, .12) 55%, transparent 75%); } .fx-shake { animation: fxShake .45s ease; } .fx-dirty { animation: fxShake .45s ease; filter: saturate(.55) brightness(.85); box-shadow: 0 0 0 .25rem var(--fx-dirt, #6d4c41), 0 0 1rem var(--fx-dirt, #6d4c41) !important; } .fx-burn { animation: fxBurn .28s ease-in-out infinite alternate; } .fx-scared { animation: fxShiver .11s linear infinite; } .fx-king { filter: drop-shadow(0 0 .5rem #ffd54f) drop-shadow(0 0 1.25rem #ffb300); } .fx-quake { animation: fxQuake .6s ease; } @keyframes fxShake { 0%, 100% { transform: none; } 20% { transform: translateX(-6px) rotate(-4deg); } 40% { transform: translateX(6px) rotate(4deg); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } } @keyframes fxBurn { from { filter: drop-shadow(0 0 .375rem #ff9800) drop-shadow(0 0 .75rem #ff5722); } to { filter: drop-shadow(0 0 .75rem #ffc107) drop-shadow(0 0 1.5rem #ff3d00); } } @keyframes fxShiver { 0% { transform: translate(1px, 0); } 50% { transform: translate(-1px, 1px); } 100% { transform: translate(1px, -1px); } } @keyframes fxQuake { 0%, 100% { transform: none; } 15% { transform: translate(-8px, 4px); } 30% { transform: translate(7px, -5px); } 45% { transform: translate(-6px, -3px); } 60% { transform: translate(5px, 4px); } 75% { transform: translate(-3px, 2px); } } .dk-say .fxbtn { background: linear-gradient(135deg, #8847ff, #d32ce6); box-shadow: 0 0 .75rem rgba(211, 44, 230, .55); } /* the capsule in the lobby head */ .dk-head .fxcap { grid-column: 1 / -1; display: flex; align-items: center; gap: .625rem; width: 100%; min-height: 2.75rem; padding: .375rem .75rem .375rem .375rem; border: 0; border-radius: 1rem; color: #fff; font: inherit; text-align: left; cursor: pointer; background: linear-gradient(135deg, rgba(136, 71, 255, .55), rgba(211, 44, 230, .45)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); } .dk-head .fxcap .ic { flex: none; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .18); font-size: 1.05rem; } .dk-head .fxcap b { flex: 1; font-size: .875rem; } .dk-head .fxcap i { font-style: normal; font-size: .75rem; opacity: .8; } /* the inventory */ .fx-shop-head { display: grid; grid-template-columns: 1fr auto; gap: .25rem .5rem; align-items: baseline; margin-bottom: .75rem; } .fx-shop-head b { font-size: 1.125rem; font-weight: 800; } .fx-shop-head .cnt { font-style: normal; font-size: .8125rem; font-weight: 700; color: var(--hint, #8a8a8e); } .fx-shop-head span { grid-column: 1 / -1; font-size: .8125rem; line-height: 1.35; color: var(--hint, #8a8a8e); } .fx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; } .fx-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: .125rem; padding: .5rem .25rem .625rem; border: 0; border-radius: .75rem; overflow: hidden; color: #fff; font: inherit; cursor: pointer; background: linear-gradient(180deg, #2b303b, #1a1d24); box-shadow: inset 0 -.1875rem 0 var(--rc); } .fx-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 32%, var(--rc), transparent 62%); opacity: .38; pointer-events: none; } .fx-card > * { position: relative; } .fx-card.owned { box-shadow: inset 0 -.1875rem 0 var(--rc), inset 0 0 0 1.5px var(--rc); } .fx-card .pic { width: 3.25rem; height: 3.25rem; margin: .125rem 0 .25rem; } .fx-card .pic img { width: 100%; height: 100%; filter: drop-shadow(0 .25rem .5rem rgba(0, 0, 0, .45)); } .fx-card .nm { font-size: .75rem; font-weight: 700; line-height: 1.15; text-align: center; } .fx-card .rar { font-size: .625rem; font-weight: 700; color: var(--rc); text-transform: uppercase; letter-spacing: .03em; } .fx-card .pay, .fx-card .own { display: inline-flex; align-items: center; gap: .1875rem; margin-top: .25rem; height: 1.375rem; padding: 0 .5rem; border-radius: .6875rem; font-size: .75rem; font-weight: 800; } .fx-card .pay { background: linear-gradient(135deg, #ffcf40, #ff9f00); color: #3a2a00; } .fx-card .pay .star { width: .8125rem; height: .8125rem; } .fx-card .own { background: rgba(76, 217, 100, .2); color: #6ee787; } .fx-card[data-r="legend"]::after, .fx-card[data-r="mythic"]::after, .fx-card[data-r="gold"]::after, .fx-item[data-r="gold"] .stage::after, .fx-item[data-r="mythic"] .stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%); background-size: 250% 100%; animation: fxShine 2.8s ease-in-out infinite; pointer-events: none; } @keyframes fxShine { from { background-position: 130% 0; } to { background-position: -130% 0; } } .fx-fine { margin-top: .75rem; font-size: .6875rem; line-height: 1.35; color: var(--hint, #8a8a8e); text-align: center; } /* one item */ .fx-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .25rem; } .fx-item .stage { position: relative; width: 100%; height: 12rem; border-radius: 1rem; overflow: hidden; background: linear-gradient(180deg, #262a33, #14161b); box-shadow: inset 0 -.25rem 0 var(--rc); } .fx-item .stage .glow { position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, var(--rc), transparent 60%); opacity: .45; } .fx-item .stage .lot { position: absolute; left: 50%; top: 50%; width: 8rem; height: 8rem; transform: translate(-50%, -50%); } .fx-item .stage .dummy { position: absolute; right: .875rem; bottom: .875rem; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 50%; font-size: 1.5rem; background: rgba(255, 255, 255, .14); } .fx-item .rar { margin-top: .625rem; font-size: .6875rem; font-weight: 800; color: var(--rc); text-transform: uppercase; letter-spacing: .05em; } .fx-item .nm { font-size: 1.25rem; font-weight: 800; } .fx-item p { margin: 0 0 .5rem; font-size: .875rem; line-height: 1.35; color: var(--hint, #8a8a8e); } .fx-item .btn { width: 100%; } .fx-item .btn.buy { margin-top: .5rem; display: inline-flex; align-items: center; justify-content: center; gap: .375rem; font-weight: 800; background: linear-gradient(135deg, #ffcf40, #ff9f00); color: #3a2a00; } .fx-item .btn.buy .star { width: 1.125rem; height: 1.125rem; } .fx-item .btn.buy.busy { opacity: .6; pointer-events: none; } .fx-item .have { margin-top: .5rem; font-size: .875rem; font-weight: 700; color: #34c759; } /* the picker at the table */ .fx-pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .375rem; } .fx-pi { position: relative; display: flex; flex-direction: column; align-items: center; gap: .125rem; padding: .375rem .125rem; border: 0; border-radius: .75rem; font: inherit; color: inherit; cursor: pointer; background: rgba(127, 127, 127, .12); box-shadow: inset 0 -.125rem 0 var(--rc); } .fx-pi img { width: 2.5rem; height: 2.5rem; } .fx-pi .cap { display: inline-flex; align-items: center; gap: .125rem; font-size: .625rem; font-weight: 700; line-height: 1.1; text-align: center; } .fx-pi .cap .star { width: .6875rem; height: .6875rem; } .fx-pi.locked img { filter: grayscale(.85) opacity(.55); } .fx-pi.locked .cap { color: #e0a200; } .fx-pick .fx-more { width: 100%; margin-top: .625rem; } /* effects v2 (2026-09-30): the thrower glows with a chip over them, ✨ counts down, aiming by a tap, the real firework */ .fx-caster { animation: fxCaster .7s ease-in-out infinite alternate !important; } @keyframes fxCaster { from { box-shadow: 0 0 0 .1875rem var(--fx-c), 0 0 .75rem var(--fx-c); } to { box-shadow: 0 0 0 .3125rem var(--fx-c), 0 0 1.75rem var(--fx-c); } } .fx-chip { position: fixed; z-index: 9992; pointer-events: none; transform: translateX(-50%); padding: .25rem .625rem; border-radius: .875rem; background: rgba(12, 14, 20, .82); color: #fff; font-size: .75rem; font-weight: 800; white-space: nowrap; box-shadow: 0 0 0 1.5px var(--fx-c), 0 .375rem 1rem rgba(0, 0, 0, .35); } .dk-say .fxbtn.cd { background: conic-gradient(#d32ce6 calc(var(--p, 0) * 360deg), rgba(255, 255, 255, .14) 0); box-shadow: none; font-size: .8125rem; font-weight: 800; color: #fff; } .fx-aim .opp .avatar, .fx-aim .dk-wait .seat.tap .avatar { animation: fxAimPulse .9s ease-in-out infinite alternate; } @keyframes fxAimPulse { from { box-shadow: 0 0 0 .1875rem #ffd54f; transform: scale(1); } to { box-shadow: 0 0 0 .3125rem #ffd54f, 0 0 1.25rem #ffb300; transform: scale(1.08); } } .fx-aimbar { position: fixed; z-index: 9993; left: 50%; bottom: calc(4.25rem + var(--safe-bottom, 0px)); transform: translateX(-50%); width: calc(100% - 1.5rem); max-width: 24rem; box-sizing: border-box; display: flex; align-items: center; gap: .5rem; padding: .5rem .5rem .5rem .875rem; border-radius: 1rem; background: rgba(12, 14, 20, .9); color: #fff; font-size: .8125rem; font-weight: 700; box-shadow: 0 0 0 1.5px #ffd54f, 0 .5rem 1.5rem rgba(0, 0, 0, .4); animation: dkOthersIn .25s ease-out; } .fx-aimbar span { flex: 1; min-width: 0; } .fx-aimbar button { flex: none; height: 2rem; padding: 0 .75rem; border: 0; border-radius: 1rem; font: inherit; font-weight: 800; cursor: pointer; } .fx-aimbar .all { background: #ffd54f; color: #3a2a00; } .fx-aimbar .x { width: 2rem; padding: 0; background: rgba(255, 255, 255, .14); color: #fff; } .fx-fw { position: fixed; inset: 0; z-index: 9990; pointer-events: none; } .fx-fw canvas { z-index: 9990 !important; pointer-events: none !important; background: transparent !important; } /* aiming v2 (2026-09-30): its own layer — the table dims, the targets wiggle over it */ .fx-aim-layer { position: fixed; inset: 0; z-index: 9986; background: rgba(6, 10, 16, .62); opacity: 0; transition: opacity .16s ease; -webkit-tap-highlight-color: transparent; } .fx-aim-layer.on { opacity: 1; } .fx-aim-head { position: absolute; left: 50%; top: calc(var(--safe-top, 0px) + 5.5rem); transform: translateX(-50%); width: calc(100% - 2rem); max-width: 22rem; box-sizing: border-box; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .75rem; align-items: center; padding: .75rem 1rem; border-radius: 1.125rem; background: rgba(18, 20, 28, .95); color: #fff; box-shadow: 0 0 0 1.5px var(--rc), 0 .75rem 2rem rgba(0, 0, 0, .45); pointer-events: none; } .fx-aim-head img { grid-row: 1 / 3; width: 2.75rem; height: 2.75rem; animation: fxAimBob 1s ease-in-out infinite alternate; } .fx-aim-head b { font-size: 1.0625rem; font-weight: 800; } .fx-aim-head span { font-size: .8125rem; opacity: .75; } .fx-aim-t { position: absolute; width: var(--s); height: var(--s); margin: 0; padding: 0; border: 0; background: none; transform: translate(-50%, -50%); cursor: pointer; animation: fxWiggle .32s ease-in-out infinite alternate; -webkit-tap-highlight-color: transparent; } .fx-aim-t .fx-aim-av { width: 100% !important; height: 100% !important; font-size: calc(var(--s) * .38) !important; box-shadow: 0 0 0 .25rem #ffd54f, 0 0 1.5rem rgba(255, 196, 0, .8); animation: fxAimRing .8s ease-in-out infinite alternate; } .fx-aim-t .nm { position: absolute; left: 50%; top: calc(100% + .5rem); transform: translateX(-50%); padding: .1875rem .5rem; border-radius: .625rem; background: #ffd54f; color: #3a2a00; font-size: .75rem; font-weight: 800; white-space: nowrap; } .fx-aim-t:active { animation: none; transform: translate(-50%, -50%) scale(.92); } .fx-aim-foot { position: absolute; left: 50%; bottom: calc(var(--safe-bottom, 0px) + 1.25rem); transform: translateX(-50%); width: calc(100% - 2rem); max-width: 22rem; display: grid; grid-template-columns: 1fr auto; gap: .5rem; } .fx-aim-foot button { height: 3rem; padding: 0 1.125rem; border: 0; border-radius: 1rem; font: inherit; font-size: .9375rem; font-weight: 800; cursor: pointer; } .fx-aim-foot .all { background: linear-gradient(135deg, #ffd54f, #ffb300); color: #3a2a00; } .fx-aim-foot .x { background: rgba(255, 255, 255, .16); color: #fff; } @keyframes fxWiggle { 0% { transform: translate(-50%, -50%) rotate(-7deg) scale(1.04); } 100% { transform: translate(-50%, -50%) rotate(7deg) scale(1.1); } } @keyframes fxAimRing { from { box-shadow: 0 0 0 .1875rem #ffd54f, 0 0 .75rem rgba(255, 196, 0, .6); } to { box-shadow: 0 0 0 .375rem #ffd54f, 0 0 2rem rgba(255, 196, 0, .95); } } @keyframes fxAimBob { from { transform: translateY(-2px) rotate(-6deg); } to { transform: translateY(2px) rotate(6deg); } } /* aiming v2.1 (2026-09-30): round glow, no square behind it; the hint in the middle of the table, never over the players; 7 s bar */ .fx-aim-t { overflow: visible !important; border-radius: 50%; -webkit-appearance: none; appearance: none; background: transparent !important; box-shadow: none !important; } .fx-aim-t .fx-aim-av { border-radius: 50% !important; overflow: hidden !important; } .fx-aim-head { top: 50%; transform: translate(-50%, -50%); overflow: hidden; padding-bottom: 1rem; } .fx-aim-head .bar { position: absolute; left: 0; bottom: 0; height: .25rem; width: 100%; background: var(--rc); transform-origin: left center; animation: fxAimTime 7s linear forwards; } @keyframes fxAimTime { from { transform: scaleX(1); } to { transform: scaleX(0); } } /* the saucer's light when it hovers right over a player (2026-09-30) */ .fx-ring { position: fixed; z-index: 9989; pointer-events: none; border-radius: 50%; background: radial-gradient(circle, rgba(170, 255, 180, .7), rgba(120, 255, 150, .25) 55%, transparent 72%); box-shadow: 0 0 1.5rem rgba(140, 255, 160, .6); } /* the inventory, fixed height (2026-09-30, the user): the head stays, the grid scrolls inside; no shine sweeping over the top cards */ .fx-shop { display: flex; flex-direction: column; height: min(32rem, calc(100vh - 11rem)); min-height: 0; } .fx-shop .fx-shop-head, .fx-shop .fx-fine { flex: none; } .fx-shop .fx-grid { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: .125rem .125rem .25rem; align-content: start; } .fx-card[data-r="legend"]::after, .fx-card[data-r="mythic"]::after, .fx-card[data-r="gold"]::after { content: none; animation: none; } .fx-shop .fx-grid { grid-auto-rows: max-content; } /* the cards clip their glow (overflow hidden), so auto rows shrank them to nothing in the fixed box */ /* the salute v3: a rocket with a tail (2026-09-30) */ .fx-rocket { position: fixed; z-index: 9990; pointer-events: none; width: 4px; height: 26px; margin-left: -2px; border-radius: 2px; background: linear-gradient(0deg, rgba(255, 200, 80, 0), #ffe082 60%, #fff); box-shadow: 0 0 .5rem #ffca28; } /* the inventory, compact (2026-09-30, the user): four across, smaller cards — all fifteen fit, no scrolling */ .fx-shop { height: auto; max-height: calc(100vh - 11rem); } .fx-shop .fx-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .375rem; } .fx-shop .fx-card { padding: .375rem .1875rem .5rem; border-radius: .625rem; gap: 0; } .fx-shop .fx-card .pic { width: 2.375rem; height: 2.375rem; margin: .0625rem 0 .1875rem; } .fx-shop .fx-card .nm { font-size: .625rem; } .fx-shop .fx-card .rar { font-size: .5rem; } .fx-shop .fx-card .pay, .fx-shop .fx-card .own { height: 1.125rem; padding: 0 .375rem; margin-top: .1875rem; font-size: .625rem; } .fx-shop .fx-card .pay .star { width: .6875rem; height: .6875rem; } .fx-shop-head { margin-bottom: .5rem; } .fx-shop-head span { font-size: .75rem; } /* the pretend player on the item card */ .fx-item .stage .dummy { width: auto; height: auto; display: flex; flex-direction: column; align-items: center; gap: .25rem; background: none; border-radius: 0; font-size: inherit; } .fx-item .stage .dummy .avatar { width: 2.75rem; height: 2.75rem; font-size: 1.125rem; box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .35), 0 0 0 .1875rem rgba(255, 255, 255, .25); } .fx-item .stage .dummy .nm { font-size: .625rem; font-weight: 700; color: rgba(255, 255, 255, .85); } /* the item card v2 (2026-09-30): a full-bleed stage with two players, the show plays by itself; ✕ in the corner */ .modal-dialog.fx-modal { padding: 0 !important; overflow: hidden; } .modal-dialog.fx-modal .mbtns { display: none; } .fx-item.v2 { gap: 0; } .fx-item.v2 .stage { height: 15rem; border-radius: 0; box-shadow: inset 0 -.25rem 0 var(--rc); background: radial-gradient(120% 90% at 50% 20%, #2b2f3d, #111319 70%); } .fx-item.v2 .stage .glow { background: radial-gradient(circle at 50% 42%, var(--rc), transparent 58%); opacity: .5; } .fx-item.v2 .stage .sky { position: absolute; inset: 0; pointer-events: none; } .fx-item.v2 .stage .sky i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; transform: scale(var(--z, 1)); animation: fxTwinkle 3s ease-in-out infinite; } @keyframes fxTwinkle { 0%, 100% { opacity: .15; } 50% { opacity: .9; } } .fx-item.v2 .stage .lot { top: 42%; width: 8.5rem; height: 8.5rem; transition: opacity .25s ease, transform .25s ease; } .fx-item.v2 .stage .lot.away { opacity: 0; transform: translate(-50%, -50%) scale(.6); } .fx-item.v2 .stage .who { position: absolute; bottom: .875rem; display: flex; flex-direction: column; align-items: center; gap: .25rem; } .fx-item.v2 .stage .who.me { left: 1rem; } .fx-item.v2 .stage .who.foe { right: 1rem; } .fx-item.v2 .stage .who .avatar { width: 2.75rem; height: 2.75rem; font-size: 1.125rem; box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .4), 0 0 0 .1875rem rgba(255, 255, 255, .22); } .fx-item.v2 .stage .who .nm { font-size: .625rem; font-weight: 700; color: rgba(255, 255, 255, .85); } .fx-item.v2 .stage .x { position: absolute; top: .625rem; right: .625rem; width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: .875rem; cursor: pointer; z-index: 2; } .fx-item.v2 .info { display: flex; flex-direction: column; align-items: center; padding: .875rem 1.25rem .25rem; text-align: center; } .fx-item.v2 .rar { margin: 0 0 .375rem; padding: .1875rem .625rem; border-radius: .75rem; background: var(--rc); color: #fff; font-size: .625rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .fx-item.v2 .nm { font-size: 1.375rem; font-weight: 800; line-height: 1.15; } .fx-item.v2 p { margin: .25rem 0 0; font-size: .875rem; line-height: 1.35; color: var(--hint, #8a8a8e); } .fx-item.v2 .acts { width: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: .5rem; padding: .75rem 1rem 1rem; } .fx-item.v2 .again { align-self: center; height: 2rem; padding: 0 .875rem; border: 0; border-radius: 1rem; background: rgba(127, 127, 127, .12); color: inherit; font: inherit; font-size: .8125rem; font-weight: 700; cursor: pointer; } .fx-item.v2 .btn.buy { margin: 0; height: 3.25rem; border-radius: 1rem; font-size: 1.0625rem; box-shadow: 0 .5rem 1.25rem rgba(255, 159, 0, .35); } .fx-item.v2 .have { margin: 0; padding: .75rem; border-radius: 1rem; background: rgba(52, 199, 89, .12); text-align: center; } /* the item card, compact bottom (2026-09-30, the user): name + rarity on one line, «назавжди» said plainly, ↻ and the button in one row */ .fx-item.v2 .stage { height: 13.5rem; } .fx-item.v2 .info { padding: .75rem 1rem 0; align-items: stretch; text-align: left; } .fx-item.v2 .info .line { display: flex; align-items: center; gap: .5rem; } .fx-item.v2 .info .line .nm { flex: 1; min-width: 0; font-size: 1.25rem; } .fx-item.v2 .info .line .rar { margin: 0; flex: none; } .fx-item.v2 .info p { margin: .125rem 0 0; font-size: .8125rem; } .fx-item.v2 .info .forever { margin-top: .5rem; padding: .5rem .625rem; border-radius: .75rem; background: color-mix(in srgb, var(--rc) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 40%, transparent); font-size: .8125rem; font-weight: 700; line-height: 1.3; } .fx-item.v2 .acts { flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: .5rem; padding: .625rem 1rem 1rem; } /* the catalogue button wraps onto its own full line under ↻ + buy (2026-09-30, the user) */ .fx-item.v2 .again { align-self: auto; flex: none; width: 3.25rem; height: 3.25rem; padding: 0; border-radius: 1rem; font-size: 1.375rem; font-weight: 800; } .fx-item.v2 .btn.buy, .fx-item.v2 .have { flex: 1; min-width: 0; } .fx-item.v2 .have { display: grid; place-items: center; padding: 0; height: 3.25rem; box-sizing: border-box; font-size: 1rem; font-weight: 800; } /* grid cards, compact (2026-09-30): the rarity is a small tag in the corner, not a line of its own */ .fx-shop .fx-card { padding-top: .875rem; } .fx-shop .fx-card .rar { position: absolute; top: .25rem; left: .25rem; padding: .0625rem .25rem; border-radius: .3125rem; background: var(--rc); color: #fff; font-size: .4375rem; letter-spacing: .02em; line-height: 1.3; } .fx-shop .fx-card .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* performance (2026-09-30, the user: «тормозит всю игру»): nothing that repaints every frame — no shadow filter on the living emoji, no animated box-shadow/filter; pulses are transforms (the compositor does them for free) */ .fx-lot { filter: none; contain: strict; } .fx-still { position: fixed; z-index: 9991; pointer-events: none; will-change: transform, opacity; } .fx-caster { animation: fxCasterPulse .6s ease-in-out infinite alternate !important; box-shadow: 0 0 0 .25rem var(--fx-c), 0 0 1rem var(--fx-c) !important; } @keyframes fxCasterPulse { from { transform: scale(1); } to { transform: scale(1.1); } } .fx-burn { animation: fxShiver .12s linear infinite; filter: drop-shadow(0 0 .5rem #ff9800); } .fx-aim-t .fx-aim-av { animation: none; box-shadow: 0 0 0 .3125rem #ffd54f, 0 0 1.25rem rgba(255, 196, 0, .85); } .fx-item.v2 .stage .sky i { animation-duration: 4s; } /* ✨ tapped too early: a red shake instead of a message (2026-09-30) */ .dk-say .fxbtn.fx-deny { animation: fxDeny .5s ease; box-shadow: 0 0 0 .1875rem #ff3b30, 0 0 .875rem rgba(255, 59, 48, .8) !important; background: #ff3b30 !important; } @keyframes fxDeny { 0%, 100% { transform: none; } 15% { transform: translateX(-5px) rotate(-8deg); } 30% { transform: translateX(5px) rotate(8deg); } 45% { transform: translateX(-4px) rotate(-5deg); } 60% { transform: translateX(3px) rotate(4deg); } 80% { transform: translateX(-1px); } } /* the canvas emoji fill their box */ .fx-lot canvas, .fx-item .stage .lot canvas { display: block; width: 100% !important; height: 100% !important; } /* ✨: a smooth ring for my cooldown instead of the stepping conic fill (2026-09-30) */ .dk-say .fxbtn { position: relative; } .dk-say .fxbtn .ic { position: relative; z-index: 1; } .dk-say .fxbtn .ring { position: absolute; inset: -.1875rem; pointer-events: none; opacity: 0; transition: opacity .2s ease; } .dk-say .fxbtn .ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); } .dk-say .fxbtn .ring circle { fill: none; stroke: #d32ce6; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; } .dk-say .fxbtn.cd.mine .ring { opacity: 1; } .dk-say .fxbtn.cd { background: rgba(255, 255, 255, .14) !important; box-shadow: none; } /* the bottom line of the table (2026-09-30, the user): a wide, raised ✨ pill; the free emoji scroll sideways; a wider field */ .dk-say { gap: .375rem; } .dk-say .fxbtn { flex: none; width: 3.5rem; height: 2.5rem; border-radius: 1.25rem; font-size: 1.375rem; background: linear-gradient(180deg, #c084ff 0%, #8f4dff 50%, #6a2bd9 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -.1875rem 0 rgba(40, 0, 90, .35), 0 .25rem .75rem rgba(136, 71, 255, .55) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); } .dk-say .fxbtn:active { transform: translateY(1px) scale(.97); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -.0625rem 0 rgba(40, 0, 90, .35), 0 .125rem .375rem rgba(136, 71, 255, .45) !important; } .dk-say .fxbtn.cd { background: linear-gradient(180deg, #6b5a8a, #4b3d66) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 .125rem .375rem rgba(0, 0, 0, .3) !important; font-size: 1rem; font-weight: 800; } .dk-say .fxbtn .ring { inset: -.125rem; } .dk-say .fxbtn .ring svg { transform: none; } .dk-say .fxbtn .ring rect { fill: none; stroke: #e07bff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; } .dk-say .emos { flex: 0 1 6.75rem; min-width: 0; display: flex; gap: .25rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent); mask-image: linear-gradient(90deg, #000 80%, transparent); padding: .125rem 0; } .dk-say .emos::-webkit-scrollbar { display: none; } .dk-say .emos .emo { flex: none; scroll-snap-align: start; } .dk-say input { flex: 1 1 auto; min-width: 7rem; } .dk-say .fxbtn.fx-deny.fx-deny { animation: fxDeny .5s ease; background: linear-gradient(180deg, #ff6b61, #d92c21) !important; box-shadow: 0 0 0 .1875rem #ff3b30, 0 0 1rem rgba(255, 59, 48, .85) !important; } .dk-say .emos { overflow-y: hidden; touch-action: pan-x; overscroll-behavior: contain; } /* sideways only (2026-09-30, the user: «только влево-вправо») */ /* ✨ inside the conversation's field (2026-09-30): a small raised purple pill, a smooth ring for the cooldown */ .composer .field .fxin { position: relative; flex: none; align-self: flex-end; width: 2.5rem; height: 2.125rem; margin: 0 .125rem .125rem; padding: 0; border: 0; border-radius: 1.0625rem; font-size: 1.125rem; line-height: 1; cursor: pointer; color: #fff; background: linear-gradient(180deg, #c084ff 0%, #8f4dff 50%, #6a2bd9 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -.125rem 0 rgba(40, 0, 90, .35), 0 .1875rem .5rem rgba(136, 71, 255, .45); } .composer .field .fxin[hidden] { display: none; } .composer .field .fxin .ic { position: relative; z-index: 1; } .composer .field .fxin:active { transform: translateY(1px) scale(.96); } .composer .field .fxin.cd { background: linear-gradient(180deg, #8d7fa8, #62557d); font-size: .8125rem; font-weight: 800; } .composer .field .fxin .ring { position: absolute; inset: -.1875rem; pointer-events: none; opacity: 0; transition: opacity .2s ease; } .composer .field .fxin .ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); } .composer .field .fxin .ring circle { fill: none; stroke: #e07bff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; } .composer .field .fxin.cd.mine .ring { opacity: 1; } .composer .field .fxin.fx-deny { animation: fxDeny .5s ease; background: linear-gradient(180deg, #ff6b61, #d92c21); box-shadow: 0 0 0 .1875rem #ff3b30, 0 0 .875rem rgba(255, 59, 48, .8); } /* ✨ in the right corner of the field like Telegram's sticker button; «send» is folded away until there is something to send, then springs out to its right (2026-09-30, the user). Voice/video are off, so an empty field needs no button there. */ .composer .field .fxin { align-self: flex-end; margin: .3125rem .1875rem .3125rem .25rem; } .composer .field .main { transition: width .26s cubic-bezier(.2, .9, .3, 1.15), margin .26s cubic-bezier(.2, .9, .3, 1.15), opacity .18s ease, transform .32s cubic-bezier(.2, .9, .3, 1.4), background .18s ease, color .18s ease; } .composer .field .main:not(.send) { width: 0; margin-left: 0; margin-right: 0; opacity: 0; transform: scale(.3) rotate(-70deg); pointer-events: none; overflow: hidden; } /* the item card opened from a chat: the chat's ground and two bubbles instead of players (2026-09-30) */ .fx-item.v2 .stage.chat { background: none; box-shadow: inset 0 -.25rem 0 var(--rc); } .fx-item.v2 .stage.chat .chat-bg { position: absolute; inset: 0; z-index: 0; } .fx-item.v2 .stage.chat .lot { z-index: 1; } .fx-item.v2 .stage.chat .x { background: rgba(0, 0, 0, .28); } .fx-bub { position: absolute; z-index: 1; max-width: 62%; padding: .375rem .625rem; border-radius: 1rem; font-size: .8125rem; line-height: 1.3; box-shadow: 0 1px 1px rgba(0, 0, 0, .12); } .fx-bub.in { left: .75rem; top: .875rem; background: var(--color-bubble-in, #fff); color: var(--color-text, #000); border-bottom-left-radius: .25rem; } .fx-bub.out { right: .75rem; bottom: .875rem; background: var(--color-bubble-out, #e1ffc7); color: var(--color-text, #000); border-bottom-right-radius: .25rem; } /* the effects grid shows it scrolls (2026-09-30) */ .fx-shop .fx-grid.more { -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent); mask-image: linear-gradient(180deg, #000 80%, transparent); } .fx-morehint { flex: none; height: 0; overflow: hidden; opacity: 0; text-align: center; font-size: .75rem; font-weight: 700; color: var(--color-primary, #3390ec); transition: height .2s ease, opacity .2s ease; } .fx-morehint.on { height: 1.25rem; opacity: 1; animation: fxHintBob 1.2s ease-in-out infinite; } @keyframes fxHintBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } } /* the buy button never breaks: one line, the price in its own pill, the text shrinks with the screen (2026-09-30) */ .fx-item.v2 .btn.buy { display: flex; align-items: center; justify-content: center; gap: .3125rem; min-width: 0; padding: 0 .625rem 0 .875rem; white-space: nowrap; overflow: hidden; font-size: clamp(.875rem, 4.2vw, 1.0625rem); } .fx-item.v2 .btn.buy .t, .fx-item.v2 .btn.buy .t2 { flex: none; } .fx-item.v2 .btn.buy .price { flex: none; display: inline-flex; align-items: center; gap: .1875rem; margin-left: .25rem; height: 1.875rem; padding: 0 .5rem 0 .625rem; border-radius: .9375rem; background: rgba(58, 42, 0, .14); font-weight: 900; } .fx-item.v2 .btn.buy .price .star { width: 1rem; height: 1rem; } @media (max-width: 350px) { .fx-item.v2 .btn.buy .t2 { display: none; } .fx-item.v2 .acts { padding-left: .75rem; padding-right: .75rem; } .fx-item.v2 .again { width: 2.875rem; } } /* big translucent layers animate opacity on their own GPU layer, never repainted per frame (2026-09-30, «з гальмуванням») */ .fx-glow, .fx-beam, .fx-ring { will-change: opacity, transform; contain: strict; } /* Telegram-style spoiler on a post photo (2026-09-30): blurred picture, two layers of drifting sparkles, a pill; a tap reveals */ .spoiler { position: relative; overflow: hidden; display: block; border-radius: inherit; } .spoiler > img { display: block; filter: blur(22px) brightness(.8); transform: scale(1.12); transition: filter .35s ease, transform .35s ease; } .spoiler .cover { position: absolute; inset: 0; display: grid; place-items: center; cursor: pointer; background: rgba(0, 0, 0, .12); transition: opacity .35s ease; } .spoiler .cover::before, .spoiler .cover::after { content: ""; position: absolute; inset: -20%; pointer-events: none; will-change: transform; background-image: radial-gradient(circle, rgba(255, 255, 255, .95) 0 .8px, transparent 1.3px), radial-gradient(circle, rgba(255, 255, 255, .7) 0 .6px, transparent 1.1px); background-size: 9px 11px, 13px 7px; background-position: 0 0, 5px 3px; animation: spDrift 3.2s linear infinite; opacity: .85; } .spoiler .cover::after { background-size: 11px 13px, 7px 9px; animation-duration: 4.6s; animation-direction: reverse; opacity: .6; } @keyframes spDrift { from { transform: translate(0, 0); } to { transform: translate(18px, -22px); } } .spoiler .sp-pill { position: relative; z-index: 1; padding: .375rem .75rem; border-radius: 1rem; background: rgba(0, 0, 0, .45); color: #fff; font-size: .8125rem; font-weight: 700; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .spoiler.open > img { filter: none; transform: none; } .spoiler.open .cover { opacity: 0; pointer-events: none; } /* the moderator sees the photo, framed red while it is under the spoiler */ .acard img.ph.sp-mark { outline: .1875rem solid #ff3b30; outline-offset: -.1875rem; } /* spoiler sparkles: uneven, like Telegram's — several dot layers with odd sizes so no grid shows (2026-09-30) */ .spoiler .cover::before { background-image: radial-gradient(circle, rgba(255,255,255,.95) 0 .7px, transparent 1.2px), radial-gradient(circle, rgba(255,255,255,.75) 0 .9px, transparent 1.4px), radial-gradient(circle, rgba(255,255,255,.55) 0 .6px, transparent 1.1px); background-size: 17px 23px, 29px 19px, 11px 37px; background-position: 3px 7px, 13px 2px, 7px 17px; animation-duration: 3.8s; } .spoiler .cover::after { background-image: radial-gradient(circle, rgba(255,255,255,.85) 0 .8px, transparent 1.3px), radial-gradient(circle, rgba(255,255,255,.6) 0 .6px, transparent 1.1px); background-size: 23px 31px, 37px 13px; background-position: 11px 5px, 2px 21px; animation-duration: 5.3s; } /* «● зараз у чаті» under the name when the other side has the chat open (2026-09-30) */ .hsub.here { color: #34c759 !important; font-weight: 600; } /* the header's back arrow on «Моя стіна» / «Запитання» (2026-09-30) */ #root-hdr .root-back { flex: none; margin-right: .125rem; } #root-hdr .root-back[hidden] { display: none; } #root-hdr .root-back:not([hidden]) ~ .htitle .hlogo { display: none; } /* admin «Stars · Емодзі»: totals and sales per item (2026-09-30) */ .st-fx { padding: .75rem .875rem; margin-bottom: .75rem; } .st-fx-top { font-weight: 800; margin-bottom: .375rem; } .st-fx-row { display: flex; justify-content: space-between; gap: .5rem; padding: .25rem 0; font-size: .875rem; border-top: .5px solid var(--color-separator, rgba(127,127,127,.2)); } /* the admin's gift picker: a picked card is ringed gold (2026-09-29) */ .fx-giftbox .fx-card.picked { box-shadow: inset 0 -.1875rem 0 var(--rc), 0 0 0 2.5px #ffd54f; transform: translateY(-2px); } .fx-giftbox .fx-card[disabled] { opacity: .55; } /* the admin's mark (2026-09-30): a blue verified-style badge after the name; with a label on the wall's own head; a gold ring at the table */ .adm-mark { display: inline-flex; align-items: center; gap: .1875rem; vertical-align: -.125em; margin-left: .25rem; flex: none; } .adm-mark svg { width: 1em; height: 1em; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .2)); } .adm-mark.with-label b { font-size: .6875rem; font-weight: 800; padding: .0625rem .375rem; border-radius: .5rem; background: linear-gradient(135deg, #1d9bf0, #0a6fd6); color: #fff; letter-spacing: .02em; } .avatar.is-admin { box-shadow: 0 0 0 .1875rem #ffd54f, 0 0 .75rem rgba(255, 196, 0, .75) !important; } /* the table is covered by another screen: its flying cards stay out of sight (2026-09-30) */ body.dk-covered .pc.fly, body.dk-covered .pc-flip { visibility: hidden !important; } /* «Хочу так само» after a free show (2026-09-30, the user: «не сильно явное»): a small dark pill over the composer or the table's say bar, the item's still picture and three words, a thin line in the item's rarity colour; slides up, goes in 7 s. */ .fx-tease { position: fixed; left: 50%; z-index: 9985; display: inline-flex; align-items: center; gap: .375rem; max-width: calc(100vw - 2rem); margin: 0; padding: .375rem .75rem .375rem .5rem; border: 1px solid color-mix(in srgb, var(--rc, #ffd54f) 55%, transparent); border-radius: 1.25rem; background: rgba(20, 22, 30, .82); color: #fff; font-family: inherit; font-size: .8125rem; font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer; box-shadow: 0 .375rem 1.25rem rgba(0, 0, 0, .35); opacity: 0; transform: translate(-50%, 10px) scale(.94); transition: opacity .24s ease, transform .28s cubic-bezier(.2, .9, .3, 1.2); -webkit-tap-highlight-color: transparent; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .fx-tease.on { opacity: .94; transform: translate(-50%, 0) scale(1); } .fx-tease img { width: 1.375rem; height: 1.375rem; display: block; } .fx-tease span { letter-spacing: .01em; } .fx-lite .fx-tease { -webkit-backdrop-filter: none; backdrop-filter: none; } /* The lite tier (2026-09-30): nothing that re-rasters a moving face every frame */ .fx-lite .fx-burn { filter: none; } .fx-lite .fx-king { filter: none; box-shadow: 0 0 0 .1875rem #ffd54f; } .fx-lite .fx-dirty { filter: none; } .fx-lite .fx-caster { animation: none !important; } .fx-lite .fx-beam { filter: none; } /* who threw, whom it hit (2026-09-30): a ring in the item's rarity colour bursts out of the thrower and out of the target */ .fx-pulse { position: fixed; z-index: 9989; width: 4rem; height: 4rem; margin: 0; border-radius: 50%; border: .1875rem solid var(--rc, #ffd54f); box-shadow: 0 0 .75rem var(--rc, #ffd54f); pointer-events: none; will-change: transform, opacity; transform: translate(-50%, -50%) scale(.35); opacity: 0; } .fx-item.v2 .acts .allfx { flex: 1 0 100%; width: 100%; margin: 0; padding: .625rem; border: 0; border-radius: .875rem; background: rgba(127, 127, 127, .14); color: inherit; font: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer; } /* back to the whole catalogue (2026-09-30, the user) */ .fx-tease { overflow: hidden; } .fx-tease .bar { position: absolute; left: 0; right: 0; bottom: 0; height: .1875rem; background: var(--rc, #ffd54f); transform-origin: 0 50%; transform: scaleX(1); opacity: .9; } /* the ten seconds it stays (2026-09-30, the user) */ /* The admin's mark, livelier (2026-09-30, the user: «подсветка Адмін как-то интереснее»): the check glows blue, the word sits on a blue-to-violet pill with a light sweeping over it every few seconds — one pseudo-element moved by transform, nothing repaints */ .adm-mark svg { filter: drop-shadow(0 0 .2rem rgba(29, 155, 240, .75)) drop-shadow(0 1px 1px rgba(0, 0, 0, .2)); } .adm-mark.with-label b { position: relative; overflow: hidden; padding: .125rem .5rem; border-radius: .625rem; background: linear-gradient(135deg, #1d9bf0, #6a5cff 70%, #8f5cff); box-shadow: 0 0 .5rem rgba(60, 120, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .35); text-transform: uppercase; letter-spacing: .06em; } .adm-mark.with-label b::after { content: ""; position: absolute; top: -40%; bottom: -40%; left: -30%; width: 45%; background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, .7) 50%, transparent 80%); transform: translateX(-120%) skewX(-18deg); animation: admShine 3.6s ease-in-out infinite; pointer-events: none; } @keyframes admShine { 0% { transform: translateX(-120%) skewX(-18deg); } 35%, 100% { transform: translateX(340%) skewX(-18deg); } } .fx-lite .adm-mark.with-label b::after { animation: none; } /* v3 (2026-09-30, the user: «просто букву А… маленькая иконка»): one round badge the size of a letter, no check, no word */ .adm-mark b, .adm-mark.with-label b { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; width: 1.2em; height: 1.2em; padding: 0; border-radius: 50%; background: linear-gradient(135deg, #1d9bf0, #6a5cff 70%, #8f5cff); color: #fff; font-size: .8em; font-weight: 900; line-height: 1; letter-spacing: 0; text-transform: none; box-shadow: 0 0 .4rem rgba(60, 120, 255, .55), inset 0 1px 0 rgba(255, 255, 255, .35); } .adm-mark b::after { content: ""; position: absolute; top: -40%; bottom: -40%; left: -30%; width: 45%; background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, .7) 50%, transparent 80%); transform: translateX(-120%) skewX(-18deg); animation: admShine 3.6s ease-in-out infinite; pointer-events: none; } .fx-lite .adm-mark b::after { animation: none; } /* what the «А» is: the card behind a tap on it (2026-09-30, the user) */ .adm-mark { cursor: pointer; } .adm-about { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: .5rem .25rem .25rem; text-align: center; } .adm-about .adm-mark.big { margin: 0; font-size: 2.5rem; } .adm-about > b { font-size: 1.0625rem; } .adm-about p { margin: 0; font-size: .9375rem; line-height: 1.4; color: var(--hint, #8a8f98); } /* the table's say bar as the offer (2026-09-30, the user): everything else in it hides for ten seconds */ .dk-say.tease > :not(.fx-tease-in) { display: none !important; } .dk-say .fx-tease-in { position: relative; overflow: hidden; flex: 1 1 auto; display: flex; align-items: center; gap: .625rem; min-height: 2.75rem; margin: 0; padding: .375rem .875rem .5rem .625rem; border: 1px solid color-mix(in srgb, var(--rc, #ffd54f) 60%, transparent); border-radius: 1.375rem; background: linear-gradient(135deg, rgba(20, 22, 30, .9), color-mix(in srgb, var(--rc, #ffd54f) 22%, rgba(20, 22, 30, .9))); color: #fff; text-align: left; font-family: inherit; cursor: pointer; box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .3); opacity: 0; transform: translateY(8px); transition: opacity .22s ease, transform .26s cubic-bezier(.2, .9, .3, 1.2); -webkit-tap-highlight-color: transparent; } .dk-say .fx-tease-in.on { opacity: 1; transform: none; } .dk-say .fx-tease-in img { width: 2rem; height: 2rem; flex: none; filter: drop-shadow(0 0 .375rem var(--rc, #ffd54f)); } .dk-say .fx-tease-in .tx { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.15; } .dk-say .fx-tease-in .tx b { font-size: .9375rem; font-weight: 700; } .dk-say .fx-tease-in .tx i { font-style: normal; font-size: .75rem; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dk-say .fx-tease-in .arr { flex: none; font-size: 1.375rem; opacity: .7; } .dk-say .fx-tease-in .bar { position: absolute; left: 0; right: 0; bottom: 0; height: .1875rem; background: var(--rc, #ffd54f); transform-origin: 0 50%; opacity: .95; } .fx-lite .dk-say .fx-tease-in img { filter: none; } .adm-mark b svg { width: 100%; height: 100%; display: block; font-family: inherit; } /* The giveaway (2026-10-01): the hub card and the page */ .hub-card.raffle { --hc-a: #ffd166; --hc-b: #e09b1a; --hc-c: #7a4a00; --hc-live: #fff3cc; } .hub-card .art.raffle { position: relative; display: flex; align-items: center; justify-content: center; } .hub-card .art.raffle .money { font-size: 2.75rem; filter: drop-shadow(0 .375rem .75rem rgba(0, 0, 0, .35)); transform: rotate(-12deg); } .hub-card .art.raffle .tick { position: absolute; right: .5rem; bottom: .375rem; font-size: 1.75rem; transform: rotate(14deg); filter: drop-shadow(0 .25rem .5rem rgba(0, 0, 0, .35)); } .raffle { display: flex; flex-direction: column; gap: .75rem; padding: .5rem 1rem 2rem; } .raffle .rf-hero { display: flex; flex-direction: column; align-items: center; gap: .125rem; padding: 1.25rem 1rem; border-radius: 1.25rem; background: linear-gradient(135deg, #ffd166, #e09b1a 60%, #c4761a); color: #3a2300; text-align: center; box-shadow: 0 .5rem 1.5rem rgba(224, 155, 26, .35); } .raffle .rf-hero .k { font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; opacity: .8; } .raffle .rf-hero b { font-size: 2.5rem; font-weight: 900; letter-spacing: -.02em; line-height: 1.1; } .raffle .rf-hero > span:last-child { font-size: .9375rem; font-weight: 600; } .raffle .rf-mine { display: flex; flex-direction: column; align-items: center; gap: .375rem; padding: 1rem; border-radius: 1.25rem; background: var(--color-bg-secondary, rgba(127, 127, 127, .12)); text-align: center; } .raffle .rf-mine .k { font-size: .8125rem; color: var(--color-text-secondary); } .raffle .rf-mine .n { font-size: 3rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; } .raffle .rf-mine .ok { color: #2f9963; font-weight: 700; } .raffle .rf-mine .hint, .raffle .hint { font-size: .8125rem; color: var(--color-text-secondary); margin: .25rem 0 0; line-height: 1.35; } .raffle .btn.rf-join { width: 100%; max-width: 20rem; margin-top: .25rem; font-size: 1.0625rem; font-weight: 800; background: linear-gradient(135deg, #ffd166, #e09b1a); color: #3a2300; } .raffle .card { padding: .875rem 1rem; } .raffle .card h3 { margin: 0 0 .5rem; font-size: 1rem; } .raffle .rf-row { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; padding: .375rem 0; border-top: 1px solid var(--color-separator, rgba(127, 127, 127, .18)); font-size: .9375rem; } .raffle .rf-row:first-of-type { border-top: 0; } .raffle .rf-row b { font-variant-numeric: tabular-nums; white-space: nowrap; } .raffle .rf-row b.ok { color: #2f9963; } .raffle .rf-how .rf-row b { min-width: 3rem; color: #e09b1a; } .raffle .rf-link { padding: .625rem .75rem; border-radius: .75rem; background: var(--color-bg-secondary, rgba(127, 127, 127, .12)); font-size: .8125rem; word-break: break-all; font-family: ui-monospace, Menlo, monospace; user-select: all; -webkit-user-select: all; } .raffle .rf-btns { display: flex; gap: .5rem; margin-top: .625rem; } .raffle .rf-btns .btn { flex: 1; } .raffle .rf-fair p { margin: 0; font-size: .875rem; line-height: 1.4; color: var(--color-text-secondary); } .st-fx-row.tap { width: 100%; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; } /* compact (2026-10-01, the user): the hub card at the others' height, the page in fewer blocks */ .hub-card.raffle .tx b { white-space: nowrap; } .hub-card .art.raffle { line-height: 1; } .hub-card .art.raffle .money, .hub-card .art.raffle .tick { line-height: 1; } .raffle { gap: .625rem; padding: .5rem .875rem 1.5rem; } .raffle .rf-hero { flex-direction: row; align-items: center; justify-content: space-between; gap: .75rem; padding: .875rem 1rem; text-align: left; } .raffle .rf-hero .l, .raffle .rf-hero .r { display: flex; flex-direction: column; gap: .125rem; } .raffle .rf-hero .r { align-items: flex-end; text-align: right; } .raffle .rf-hero b { font-size: 1.75rem; } .raffle .rf-hero .r b { font-size: 2rem; } .raffle .rf-hero span { font-size: .8125rem; font-weight: 600; opacity: .85; } .raffle .rf-hero > span:last-child { font-size: .8125rem; } .raffle .rf-ok { padding: .625rem .875rem; border-radius: .875rem; background: rgba(47, 153, 99, .14); color: #2f9963; font-weight: 700; font-size: .9375rem; text-align: center; } .raffle .btn.rf-join { max-width: none; margin: 0; } .raffle .card { padding: .625rem .875rem; } .raffle .card h3 { margin: 0 0 .25rem; font-size: .9375rem; } .raffle .rf-row { padding: .3rem 0; font-size: .875rem; } .raffle .hint { font-size: .75rem; } .raffle .rf-link { font-size: .75rem; padding: .5rem .625rem; } .raffle .rf-btns { margin-top: .5rem; } .raffle .rf-fair { margin: 0; padding: 0 .25rem; font-size: .75rem; line-height: 1.4; color: var(--color-text-secondary); } /* a short wall still scrolls far enough for the head to fold (2026-10-02, the user: «мало постов — не скролится») */ .layer[data-screen="askbox"] > .scroll > .ask-wallbg:last-child { box-sizing: border-box; min-height: calc(100% + var(--fold-room, 0px)); } #wall-ask > div:last-child { box-sizing: border-box; min-height: calc(100% + var(--fold-room, 0px)); } /* the letter's switch in the sheet (2026-10-02, v2): a track with a gradient thumb gliding under the chosen side; each side an icon, a word and a hint */ .qsheet .qsign { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin: .375rem 1rem 0; padding: .25rem; border-radius: 1.125rem; background: color-mix(in srgb, var(--color-text) 7%, transparent); } .qsheet .qsign .thumb { position: absolute; top: .25rem; bottom: .25rem; left: .25rem; width: calc(50% - .25rem); border-radius: .9375rem; background: linear-gradient(135deg, #8b7cff, #5a3fd6); box-shadow: 0 .25rem .75rem rgba(90, 63, 214, .35); transition: transform .3s cubic-bezier(.32, .72, 0, 1); will-change: transform; } .qsheet .qsign.signed .thumb { transform: translateX(100%); } .qsheet .qsign button { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; margin: 0; padding: .375rem .5rem; border: 0; border-radius: .9375rem; background: transparent; color: var(--color-text-secondary); font: inherit; text-align: left; cursor: pointer; transition: color .22s ease; -webkit-tap-highlight-color: transparent; } .qsheet .qsign button i { font-style: normal; font-size: 1.25rem; line-height: 1; flex: none; } .qsheet .qsign button .w { display: flex; flex-direction: column; min-width: 0; } .qsheet .qsign button b { font-size: .875rem; font-weight: 800; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qsheet .qsign button span { font-size: .6875rem; line-height: 1.2; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qsheet .qsign button.on { color: #fff; } .qsheet .qsign button:active { transform: scale(.97); } /* two tiles in the head (2026-10-02): the row alone, each half the width */ .ask-top .ask-tiles.two .trow .tile { flex: 1; } /* folded, the two buttons keep their words (2026-10-02, the user: «текст чтоб оставался у кнопок»): small pills in the strip, not circles */ .ask-top.folded .ask-tiles.three.two .tile { width: auto; height: 1.875rem; padding: 0 .625rem 0 .5rem; border-radius: .9375rem; gap: .3rem; } .ask-top.folded .ask-tiles.three.two .tile span { display: inline; font-size: .75rem; font-weight: 700; white-space: nowrap; } .ask-top.folded .ask-tiles.three.two .tile svg { width: .9375rem; height: .9375rem; } /* a signed question (2026-10-02): the asker's name is a link to their wall */ .ask-it .qb b.tap, .acard.askq .head span.tap { cursor: pointer; text-decoration: underline dotted; text-underline-offset: .15em; } /* the two pills fit the strip on a 390 px phone (2026-10-02): tighter, smaller type, no cut words */ .ask-top.folded .ask-tiles.three.two { gap: .25rem; right: .625rem; } .ask-top.folded .ask-tiles.three.two .tile { height: 1.75rem; padding: 0 .5rem 0 .4375rem; gap: .25rem; } .ask-top.folded .ask-tiles.three.two .tile span { font-size: .6875rem; } .ask-top.folded .ask-tiles.three.two .tile svg { width: .875rem; height: .875rem; } /* the switch and the field as one box (2026-10-02, the user) */ .qsheet .qbox { border-radius: .875rem; background: var(--color-background-secondary); overflow: hidden; } .qsheet .qbox .qsign { margin: 0; padding: .25rem; border-radius: 0; background: transparent; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent); } .qsheet .qbox .qsign .thumb { top: .25rem; bottom: .25rem; left: .25rem; width: calc(50% - .25rem); border-radius: .625rem; } .qsheet .qbox textarea { border-radius: 0; background: transparent; } /* «Мої дописи» in the chats tab (2026-10-02): the post's words under the title, two lines */ .row-item .hint.post-brief { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; } /* the contest «Найкращий допис» (2026-10-04) */ .hub-card.contest { --hc-a: #ffd166; --hc-b: #e09b1a; --hc-c: #7a4a00; --hc-live: #fff3cc; } .hub-card .art.contest { position: relative; display: flex; align-items: center; justify-content: center; } .hub-card .art.contest .money { font-size: 2.75rem; filter: drop-shadow(0 .375rem .75rem rgba(0, 0, 0, .35)); transform: rotate(-8deg); } .hub-card .art.contest .tick { position: absolute; right: .5rem; bottom: .375rem; font-size: 1.75rem; transform: rotate(14deg); filter: drop-shadow(0 .25rem .5rem rgba(0, 0, 0, .35)); } .wq-prio.wq-contest .ico { background: linear-gradient(135deg, #ffd166, #e09b1a); font-size: 1rem; } .wq-prio.wq-contest.on { background: rgba(255, 209, 102, .2); box-shadow: inset 0 0 0 .5px rgba(255, 209, 102, .55); } .wq-prio.wq-contest .t span.short { color: #ffd166; opacity: 1; font-weight: 600; } .wq-prio.wq-contest[hidden] { display: none; } .contest-pg .ct-quote { padding: .625rem .75rem; border-radius: .75rem; background: var(--color-bg-secondary, rgba(127, 127, 127, .12)); font-size: .875rem; line-height: 1.35; max-height: 6.5rem; overflow: hidden; white-space: pre-wrap; margin-bottom: .5rem; } .contest-pg .ct-step { display: flex; align-items: flex-start; gap: .625rem; padding: .5rem 0; border-top: 1px solid var(--color-separator, rgba(127, 127, 127, .18)); opacity: .55; } .contest-pg .ct-step.done, .contest-pg .ct-step.now { opacity: 1; } .contest-pg .ct-step > i { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .8125rem; font-weight: 700; background: rgba(127, 127, 127, .2); } .contest-pg .ct-step.done > i { background: #2f9963; color: #fff; } .contest-pg .ct-step.now > i { background: #e09b1a; color: #fff; } .contest-pg .ct-step b { display: block; font-size: .9375rem; } .contest-pg .ct-step span { display: block; font-size: .8125rem; color: var(--color-text-secondary); line-height: 1.3; } .contest-pg .ct-steps .btn { width: 100%; margin-top: .5rem; } .contest-pg .rf-how .rf-row { justify-content: flex-start; } .contest-pg .rf-how .rf-row b { min-width: 1.5rem; } .acard.contest { box-shadow: inset .1875rem 0 0 #e09b1a; } .acard .meta.contest-mark { color: #e09b1a; font-weight: 600; } /* the contest in the composer, second take: a chip in the card's bar, a note under the card */ .wp-bar .wp-contest { flex: none; height: 2.25rem; padding: 0 .625rem; border: 0; border-radius: 1.125rem; display: inline-flex; align-items: center; gap: .25rem; font-size: .8125rem; font-weight: 700; color: #b9770a; background: rgba(224, 155, 26, .16); position: relative; overflow: hidden; white-space: nowrap; } .wp-bar .wp-contest[hidden] { display: none; } .wp-bar .wp-contest i { font-style: normal; font-size: 1rem; } .wp-bar .wp-contest.on { padding: 0; width: 2.25rem; justify-content: center; background: linear-gradient(135deg, #ffd166, #e09b1a); box-shadow: 0 0 0 .125rem rgba(255, 209, 102, .35); } .wp-bar .wp-contest.taken { opacity: .5; } .wnote-contest { margin: .5rem 1rem 0; padding: .5rem .75rem; border-radius: .75rem; font-size: .75rem; line-height: 1.4; color: #8a5a00; background: rgba(224, 155, 26, .14); } .wnote-contest[hidden] { display: none; } .contest-pg .ct-fpost { padding: .625rem 0; border-top: 1px solid var(--color-separator, rgba(127, 127, 127, .18)); } .contest-pg .ct-fpost.mine, .contest-pg .ct-fpost.win { margin: 0 -.5rem; padding: .625rem .5rem; border-radius: .75rem; background: rgba(224, 155, 26, .12); border-top-color: transparent; } .contest-pg .ct-ftext { font-size: .9375rem; line-height: 1.4; white-space: pre-wrap; max-height: 7rem; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); } .contest-pg .ct-ftext.open { max-height: none; -webkit-mask-image: none; mask-image: none; } .contest-pg .ct-ffoot { display: flex; align-items: center; gap: .5rem; margin-top: .375rem; font-size: .8125rem; color: var(--color-text-secondary); } .contest-pg .ct-ffoot > span { flex: 1; min-width: 0; } .contest-pg .ct-ffoot .ct-vote { background: linear-gradient(135deg, #ffd166, #e09b1a); color: #3a2300; font-weight: 700; } .contest-pg .ct-ffoot .ct-my { color: #2f9963; white-space: nowrap; } /* the contest: the bar over the footer, the mark in «Мої дописи» */ .contest-float { position: absolute; left: .75rem; right: .75rem; bottom: calc(var(--tabbar-height) + var(--tabbar-gap) + var(--safe-bottom) + .375rem); z-index: 6; display: flex; align-items: center; gap: .625rem; padding: .5rem .75rem; border: 0; border-radius: 1rem; text-align: left; color: #3a2300; background: linear-gradient(135deg, #ffd166, #e09b1a); box-shadow: 0 .25rem .875rem rgba(224, 155, 26, .45); font-size: .875rem; overflow: hidden; } .contest-float[hidden] { display: none; } .contest-float > i { font-style: normal; font-size: 1.375rem; flex: none; } .contest-float .grow { flex: 1; min-width: 0; } .contest-float b { display: block; font-size: .875rem; } .contest-float .cap { display: block; font-size: .75rem; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .contest-float svg { flex: none; width: 1rem; height: 1rem; opacity: .7; } .contest-float.todo { animation: contest-glow 1.8s ease-in-out infinite; } @keyframes contest-glow { 0%, 100% { box-shadow: 0 .25rem .875rem rgba(224, 155, 26, .45); } 50% { box-shadow: 0 .25rem 1.5rem rgba(255, 209, 102, .95), 0 0 0 .1875rem rgba(255, 209, 102, .35); } } body.keyboard-visible .contest-float, body.ctx-open .contest-float { display: none; } .acard .paidmark.contestmark { background: linear-gradient(135deg, #ffd166, #e09b1a); color: #3a2300; padding: 0 .4375rem; } .acard .contest-line { display: flex; align-items: center; gap: .375rem; width: 100%; margin: .375rem 0 0; padding: .4375rem .625rem; border: 0; border-radius: .625rem; text-align: left; font-size: .8125rem; font-weight: 600; color: #8a5a00; background: rgba(224, 155, 26, .16); position: relative; overflow: hidden; } .acard .contest-line span { flex: 1; min-width: 0; } .acard .contest-line svg { flex: none; width: .875rem; height: .875rem; opacity: .7; } /* the admin's chips on the phone: all in sight, wrapped, nothing scrolls sideways (2026-10-04) */ .adm-nav, .adm-sub { flex-wrap: wrap; overflow: visible; row-gap: .3125rem; } .st-fx-row.ct-friend { font-size: .75rem; color: var(--color-text-secondary); padding-left: 1.25rem; } /* The contest bar sits right over the tab bar; everything else that is pinned over the tab bar (the wall's capsules, the write button, the search bar, the lists' bottom padding) counts its place from --tabbar-space, so the bar's height is added to that — they all move up together instead of hiding under it (2026-10-04). */ .contesting { --tabbar-space: calc(var(--tabbar-height) + var(--tabbar-gap) + var(--safe-bottom) + 3.625rem); } body.ownwall .contesting, body.keyboard-visible .contesting { --tabbar-space: calc(var(--tabbar-height) + var(--tabbar-gap) + var(--safe-bottom)); } body.ownwall .contest-float { display: none; } .contest-pg .ct-quote-w { margin-bottom: .5rem; } .contest-pg .ct-quote-w .ct-quote { margin-bottom: 0; } .contest-pg .ct-quote-w.long { cursor: pointer; } .contest-pg .ct-quote-w.long .ct-quote:not(.open) { -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); } .contest-pg .ct-quote.open { max-height: none; } .contest-pg .ct-more { display: block; margin-top: .25rem; font-size: .75rem; font-weight: 600; color: var(--color-primary); text-align: center; } .contest-pg .ct-more[hidden] { display: none; } /* long unbroken strings must wrap inside the contest page, never push it wider */ .contest-pg { min-width: 0; max-width: 100%; overflow-x: hidden; } .contest-pg .card, .contest-pg .ct-quote-w { min-width: 0; max-width: 100%; } .contest-pg .ct-quote, .contest-pg .ct-ftext, .contest-pg .hint, .contest-pg .rf-row span, .contest-pg .ct-step span { overflow-wrap: anywhere; word-break: break-word; min-width: 0; } .contest-pg .ct-step > div { min-width: 0; flex: 1; } .contest-float .cap, .acard .contest-line span, .st-fx-row.ct-friend span { overflow-wrap: anywhere; } .contest-pg .ct-photo { display: block; width: 100%; max-height: 14rem; object-fit: cover; border-radius: .75rem; margin-bottom: .375rem; cursor: pointer; } .contest-pg .ct-photo-miss { padding: .5rem .75rem; border-radius: .75rem; margin-bottom: .375rem; font-size: .8125rem; color: var(--color-text-secondary); background: var(--color-bg-secondary, rgba(127, 127, 127, .12)); } /* the person's post on the contest page: folded by default — two lines, a small picture beside them */ .contest-pg .ct-quote-w { display: grid; grid-template-columns: auto 1fr; column-gap: .5rem; align-items: start; } .contest-pg .ct-quote-w > .ct-quote, .contest-pg .ct-quote-w > .ct-more { grid-column: 2; } .contest-pg .ct-quote-w > :first-child:not(.ct-quote) { grid-column: 1; grid-row: 1 / span 2; } .contest-pg .ct-quote-w:not(:has(.ct-photo, .ct-photo-miss)) > .ct-quote, .contest-pg .ct-quote-w:not(:has(.ct-photo, .ct-photo-miss)) > .ct-more { grid-column: 1 / -1; } .contest-pg .ct-quote-w .ct-quote { max-height: 3.5rem; padding: .5rem .625rem; } .contest-pg .ct-quote-w .ct-quote.open { max-height: none; } .contest-pg .ct-quote-w:not(.opened) .ct-photo { width: 3.5rem; height: 3.5rem; max-height: none; margin: 0; border-radius: .625rem; } .contest-pg .ct-quote-w:not(.opened) .ct-photo-miss { margin: 0; width: 3.5rem; height: 3.5rem; overflow: hidden; font-size: 0; display: grid; place-items: center; } .contest-pg .ct-quote-w:not(.opened) .ct-photo-miss::before { content: "📎"; font-size: 1.25rem; } .contest-pg .ct-quote-w.opened { display: block; } .contest-pg .ct-quote-w.opened .ct-photo { max-height: 22rem; object-fit: contain; } .contest-pg .ct-more { text-align: left; } .contest-pg .ct-next { display: flex; flex-direction: column; gap: .25rem; padding: 1rem; } .contest-pg .ct-next .k { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #e09b1a; } .contest-pg .ct-next b { font-size: 1.25rem; line-height: 1.2; } .contest-pg .ct-next p { margin: 0; font-size: .875rem; line-height: 1.4; color: var(--color-text-secondary); overflow-wrap: anywhere; } .contest-pg .ct-next .btn { width: 100%; margin-top: .625rem; font-size: 1.0625rem; font-weight: 800; } .contest-pg .ct-next.todo { box-shadow: inset 0 0 0 .125rem #e09b1a, 0 .25rem 1.25rem rgba(224, 155, 26, .25); } .contest-pg .ct-step .ct-share { flex: none; align-self: center; background: linear-gradient(135deg, #ffd166, #e09b1a); color: #3a2300; font-weight: 700; } .contest-pg .rf-how .rf-row:has(b:only-of-type) { align-items: flex-start; } .contest-pg .ct-next p.ct-how { margin-top: .375rem; padding: .5rem .625rem; border-radius: .625rem; font-size: .8125rem; background: rgba(224, 155, 26, .12); color: var(--color-text); } .acard.contest .ct-who { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--color-text); text-align: left; position: relative; overflow: hidden; } .acard.contest .ct-sub { display: block; width: 100%; border: 0; background: none; padding: .125rem 0; font-size: .8125rem; color: #2f9963; font-weight: 600; text-align: left; position: relative; overflow: hidden; overflow-wrap: anywhere; } .acard.contest .text { overflow-wrap: anywhere; cursor: pointer; } .acard.contest .pill.off { opacity: .45; } .wq-prio.muted { opacity: .55; } .wp-bar .cnt.fine { color: #2f9963; font-weight: 600; } /* «Стрічка» (2026-10-06): everyone's new answers as one feed on the «Стіна» tab */ .ask-strip { display: flex; gap: .375rem; overflow-x: auto; scrollbar-width: none; padding: .375rem .625rem .5rem; -webkit-overflow-scrolling: touch; } .ask-strip::-webkit-scrollbar { display: none; } .ask-strip .chip { flex: none; display: flex; flex-direction: column; align-items: center; gap: .3125rem; width: 4rem; padding: .25rem 0 .125rem; border-radius: .875rem; color: var(--color-text); position: relative; overflow: hidden; } .ask-strip .chip .avatar { width: 2.875rem; height: 2.875rem; font-size: 1.125rem; box-shadow: 0 0 0 2px var(--color-background-secondary), 0 0 0 3.5px var(--color-primary); } .ask-strip .chip > span { font-size: .6875rem; line-height: 1.1; max-width: 3.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ask-strip .chip .ic { width: 2.875rem; height: 2.875rem; border-radius: 50%; display: grid; place-items: center; background: var(--color-primary-tint); color: var(--color-primary); } .ask-strip .chip .ic svg { width: 1.25rem; height: 1.25rem; } .ask-strip .chip.all > span { color: var(--color-primary); font-weight: 600; } .ask-strip .chip .n { position: absolute; top: .125rem; right: .375rem; min-width: 1.125rem; height: 1.125rem; padding: 0 .3125rem; border-radius: .5625rem; background: var(--color-primary); color: #fff; font-size: .625rem; font-weight: 700; font-style: normal; line-height: 1.125rem; text-align: center; } .ask-strip .chip .medal { position: absolute; top: 0; right: .25rem; font-size: .875rem; line-height: 1; } .ask-newpill { position: sticky; top: .375rem; z-index: 3; display: flex; align-items: center; gap: .375rem; width: fit-content; margin: 0 auto .5rem; height: 2.125rem; padding: 0 .875rem 0 .75rem; border-radius: 1.0625rem; background: var(--color-primary); color: #fff; font-size: .8125rem; font-weight: 600; box-shadow: 0 .375rem 1rem rgba(51, 144, 236, .35); overflow: hidden; } .ask-newpill svg { width: 1rem; height: 1rem; } .ask-newpill[hidden] { display: none; } .ask-fcard { margin: 0 .75rem .625rem; padding: .375rem .25rem .25rem; border-radius: 1.125rem; background: var(--color-background); box-shadow: var(--shadow-island); } .ask-fcard .ask-it { margin: 0 .5rem .25rem; } .ask-fcard .ask-it .qb { background: var(--color-background-secondary); box-shadow: none; } .ask-fcard .ask-cm-row { background: var(--color-background-secondary); } .ask-fcard .ask-cm-head { background: var(--color-background-secondary); } .ask-fmore { display: flex; margin: .25rem auto 1rem; height: 2.25rem; padding: 0 1.125rem; align-items: center; border-radius: 1.125rem; background: var(--color-primary-tint); color: var(--color-primary); font-size: .875rem; font-weight: 600; position: relative; overflow: hidden; } .ask-fmore:disabled { opacity: .5; } .ask-filter.back svg:last-child { transform: none; } .ask-filter.back { padding-left: .5rem; } .ask-fbox > .skeleton, .ask-fbox .sk { margin: 0 .75rem; } /* «Стрічка» on the chat ground (2026-10-06, the user: «щоб також була з фоном»): like my own wall, without the write bar */ .wall-chat.asking.onfeed .chat-bg { display: block; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) { background: transparent; } .wask.onfeed .empty { color: rgba(255, 255, 255, .8); text-shadow: 0 1px 2px rgba(0, 0, 0, .3); } .wask.onfeed .empty .strong { color: #fff; } .wask.onfeed .ask-strip .chip > span { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); } .wask.onfeed .ask-strip .chip .avatar { box-shadow: 0 0 0 2px rgba(0, 0, 0, .25), 0 0 0 3.5px rgba(255, 255, 255, .85); } .wask.onfeed .ask-strip .chip .ic { background: rgba(0, 0, 0, .3); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .25); } .wask.onfeed .ask-strip .chip.all.on .ic { background: var(--color-primary); } .wask.onfeed .ask-strip .chip .n { background: #fff; color: var(--color-primary); } .wask.onfeed .ask-fcard { margin: 0 0 .875rem; padding: 0; background: transparent; box-shadow: none; } .wask.onfeed .ask-fcard .ask-it { margin: 0 .75rem; } .wask.onfeed .ask-fcard .ask-it .qb { background: var(--color-background); box-shadow: 0 1px 1px rgba(0, 0, 0, .1); } .wask.onfeed .ask-fcard .ask-cm-row, .wask.onfeed .ask-fcard .ask-cm-head { background: var(--color-background); } .wask.onfeed .ask-fmore { background: rgba(0, 0, 0, .3); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .22); } .wask.onfeed .skeleton { opacity: .5; } /* following a wall (2026-10-06): the pill next to the views, lit while I follow; my own head counts its followers */ .ask-follow { cursor: pointer; } .ask-follow svg { opacity: 1; } .ask-follow.on { background: var(--color-primary); color: #fff; } .ask-follow.on b, .ask-follow.on span { color: #fff; } .ask-follow span { opacity: .8; font-variant-numeric: tabular-nums; } .ask-top.pic .ask-follow:not(.on) { background: rgba(0, 0, 0, .3); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .22); } .ask-top.pic .ask-follow:not(.on) b { color: #fff; } .ask-top .meta { gap: .375rem; } .ask-top .meta .ask-views { margin-top: .5rem; } /* the owner on the record (2026-10-06): the name on the bubble and the face open the wall */ .ask-it .ab b.tap { display: inline-flex; align-items: center; gap: .125rem; cursor: pointer; opacity: .9; } .ask-it .ab b.tap .go { font-size: .8125rem; line-height: 1; opacity: .75; margin-left: .0625rem; } .ask-it .avatar.tap { cursor: pointer; } .ask-fcard .ask-it .avatar.own { width: 2rem; height: 2rem; font-size: .9375rem; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); } .wask.onfeed .ask-fcard { margin-bottom: 1.125rem; } /* «Заявки» (2026-10-06): the held group's title carries «Прийняти всіх» */ .group-title.with-act { display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .group-title.with-act .pill { text-transform: none; letter-spacing: 0; } /* ---- the wall's comments as a thread (2026-10-07, the user) --------------------------------------------------------- One quiet foot under the answer: a faint darker glass, lines parted by a hairline instead of boxes, the name plain bold, the time beside it, the text a touch larger; the field has the send button inside. */ .ask-it .ask-cm { padding: .375rem .875rem .75rem; border-top: 0; background: rgba(0, 0, 0, .16); } .ask-it .ask-cm-head { height: 1.75rem; padding: 0 .125rem; gap: .3125rem; background: none; color: rgba(255, 255, 255, .88); font-size: .8125rem; font-weight: 600; } .ask-it .ask-cm-head svg { width: 1rem; height: 1rem; opacity: .9; } .ask-it .ask-cm-head.on { background: none; color: #fff; } .ask-it .ask-cm-body { margin-top: 0; gap: 0; } .ask-it .ask-cm-row { background: none; padding: .5625rem 0 .5rem; border-radius: 0; border-top: 1px solid rgba(255, 255, 255, .12); gap: .625rem; } .ask-it .ask-cm-row.lit { background: rgba(255, 255, 255, .12); border-radius: .5rem; } .ask-it .ask-cm-row .avatar.small { width: 2rem; height: 2rem; font-size: .75rem; margin-top: .0625rem; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .28); } .ask-it .ask-cm-row .hd { align-items: baseline; justify-content: flex-start; gap: .4375rem; margin-bottom: .125rem; } .ask-it .ask-cm-row .who { gap: .375rem; margin: 0; } .ask-it .ask-cm-row .who b { font-size: .8125rem; font-weight: 700; letter-spacing: .01em; } .ask-it .ask-cm-row .who.tap b { text-decoration: none; } .ask-it .ask-cm-row time { font-size: .6875rem; color: rgba(255, 255, 255, .55); white-space: nowrap; } .ask-it .ask-cm-row .tx .t { font-size: .9375rem; line-height: 1.4; } .ask-it .ask-cm-row .re { margin: .125rem 0 .3125rem; padding: .25rem .5rem .3125rem; border-left: 2px solid rgba(255, 255, 255, .65); border-radius: .25rem .5rem .5rem .25rem; background: rgba(255, 255, 255, .1); opacity: 1; } .ask-it .ask-cm-row .re b { font-size: .6875rem; } .ask-it .ask-cm-row .re span { font-size: .75rem; opacity: .85; } .ask-it .ask-cm-row .foot { margin-top: .25rem; min-height: 0; } .ask-it .ask-cm-row .foot:has(.reacts:empty) { display: none; } .ask-it .ask-cm-row .foot .rc { height: 1.375rem; padding: 0 .5rem 0 .375rem; border-radius: .6875rem; background: rgba(255, 255, 255, .16); color: #fff; } .ask-it .ask-cm-row .foot .rc.own { background: #fff; color: #5a3fd6; } .ask-it .ask-cm-more { align-self: flex-start; margin: .25rem 0 .125rem; padding: .25rem .125rem; background: none; color: rgba(255, 255, 255, .85); font-size: .8125rem; font-weight: 600; } .ask-it .ask-cm-reply { margin: .5rem 0 .25rem; background: rgba(255, 255, 255, .12); } .ask-it .ask-cm-form { position: relative; margin-top: .5rem; gap: 0; } .ask-it .ask-cm-form textarea, .ask-it .ask-cm-form input { flex: 1; min-width: 0; min-height: 2.5rem; padding: .6875rem 2.875rem .6875rem 1rem; border: 0; border-radius: 1.25rem; background: rgba(255, 255, 255, .16); color: #fff; font-size: .9375rem; line-height: 1.2; resize: none; outline: 0; } .ask-it .ask-cm-form textarea::placeholder, .ask-it .ask-cm-form input::placeholder { color: rgba(255, 255, 255, .62); } .ask-it .ask-cm-form textarea:focus, .ask-it .ask-cm-form input:focus { background: rgba(255, 255, 255, .22); border-color: transparent; } .ask-it .ask-cm-send { position: absolute; right: .25rem; bottom: .25rem; width: 2rem; height: 2rem; background: #fff; color: #5a3fd6; box-shadow: 0 .125rem .375rem rgba(0, 0, 0, .18); } .ask-it .ask-cm-send svg { width: 1rem; height: 1rem; margin-left: .0625rem; } .ask-it .ask-cm-send:disabled { opacity: .5; } .ask-it .ask-cm-cnt { margin-top: .25rem; font-size: .6875rem; color: rgba(255, 255, 255, .7); text-align: right; } .ask-it .ask-cm-need { background: rgba(255, 255, 255, .16); color: #fff; margin-top: .375rem; } /* ---- the contest chip (2026-10-07, the user: «слишком широкий — минимальный») ---------------------------------------- A small pill at the right above the tab bar: the cup, «Конкурс», the status after a dot, one line, ellipsis. */ .contest-float { left: auto; right: .75rem; max-width: calc(100% - 1.5rem); padding: .375rem .625rem .375rem .5rem; gap: .375rem; border-radius: 1.25rem; font-size: .8125rem; box-shadow: 0 .1875rem .625rem rgba(224, 155, 26, .4); } .contest-float > i { font-size: 1rem; } .contest-float .grow { display: flex; align-items: baseline; gap: 0; min-width: 0; } .contest-float b { display: inline; font-size: .8125rem; white-space: nowrap; } .contest-float .cap { display: none; font-size: .75rem; opacity: .8; max-width: 9rem; } /* the status shows only when something is asked of the person */ .contest-float.todo .cap { display: inline; } .contest-float .cap:not(:empty)::before { content: " · "; } .contest-float svg { width: .875rem; height: .875rem; } .contesting { --tabbar-space: calc(var(--tabbar-height) + var(--tabbar-gap) + var(--safe-bottom) + 2.75rem); } /* the feed's wrapper used to paint the rows and the head with the page colour — the thread has no boxes anywhere */ .ask-fcard .ask-cm-row, .wask.onfeed .ask-fcard .ask-cm-row, .ask-fcard .ask-cm-head, .wask.onfeed .ask-fcard .ask-cm-head { background: none; } .wask.onfeed .ask-fcard .ask-cm-head.on, .ask-fcard .ask-cm-head.on { background: none; } /* the light theme: the same thread on the white card */ :root[data-theme="light"] .ask-it .ask-cm { background: rgba(0, 0, 0, .035); } :root[data-theme="light"] .ask-it .ask-cm-head, :root[data-theme="light"] .ask-fcard .ask-cm-head { background: none; color: var(--color-text-secondary); } :root[data-theme="light"] .ask-it .ask-cm-head.on, :root[data-theme="light"] .ask-fcard .ask-cm-head.on { background: none; color: var(--color-primary); } :root[data-theme="light"] .ask-it .ask-cm-row, :root[data-theme="light"] .ask-fcard .ask-cm-row { background: none; border-top-color: rgba(0, 0, 0, .08); color: var(--color-text); } :root[data-theme="light"] .ask-it .ask-cm-row.lit { background: rgba(51, 144, 236, .12); } :root[data-theme="light"] .ask-it .ask-cm-row time { color: var(--color-text-secondary); } :root[data-theme="light"] .ask-it .ask-cm-row .avatar.small { box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .08); } :root[data-theme="light"] .ask-it .ask-cm-row .re { background: rgba(0, 0, 0, .05); border-left-color: var(--color-primary); } :root[data-theme="light"] .ask-it .ask-cm-row .foot .rc { background: var(--color-background-secondary, #f2f2f7); color: var(--color-text); } :root[data-theme="light"] .ask-it .ask-cm-row .foot .rc.own { background: var(--color-primary); color: #fff; } :root[data-theme="light"] .ask-it .ask-cm-more { color: var(--color-primary); } :root[data-theme="light"] .ask-it .ask-cm-form textarea, :root[data-theme="light"] .ask-it .ask-cm-form input { background: var(--color-background-secondary, #f2f2f7); color: var(--color-text); } :root[data-theme="light"] .ask-it .ask-cm-form textarea::placeholder, :root[data-theme="light"] .ask-it .ask-cm-form input::placeholder { color: var(--color-text-secondary); } :root[data-theme="light"] .ask-it .ask-cm-form textarea:focus, :root[data-theme="light"] .ask-it .ask-cm-form input:focus { background: #fff; box-shadow: inset 0 0 0 1.5px var(--color-primary); } :root[data-theme="light"] .ask-it .ask-cm-send { background: var(--color-primary); color: #fff; box-shadow: none; } :root[data-theme="light"] .ask-it .ask-cm-cnt { color: var(--color-text-secondary); } :root[data-theme="light"] .ask-it .ask-cm-need { background: var(--color-primary-tint, rgba(51, 144, 236, .15)); color: var(--color-primary); } /* ---- a held comment (2026-10-07): the row is a rounded bubble while the menu is up, the cut-out follows its shape */ .ask-it .ask-cm-row { margin: 0 -.5rem; padding: .5625rem .5rem .5rem; border-radius: .75rem; } .ask-it .ask-cm-row.ctx-held { background: rgba(255, 255, 255, .16); border-top-color: transparent; } .ask-it .ask-cm-row.ctx-held + .ask-cm-row { border-top-color: transparent; } :root[data-theme="light"] .ask-it .ask-cm-row.ctx-held { background: var(--color-background-secondary, #f2f2f7); } /* ---- the question as an inset quote (2026-10-07, the user: «хтось спитав — должно быть намного лучше») ------------ No dark strip on top of the purple: a translucent panel inside the card, a small caps label with the mask, the question in white; the answer follows under it on the same gradient. */ .ask-it .qrow, .ask-fcard .ask-it .qrow, .wask.onfeed .ask-fcard .ask-it .qrow { margin: .5rem .5rem 0; padding: .5rem .625rem .5625rem; border-radius: .75rem; background: rgba(255, 255, 255, .13); align-items: flex-start; gap: .5rem; } .ask-it .qrow .avatar { width: 1.75rem; height: 1.75rem; font-size: .875rem; margin-top: .0625rem; } .ask-it .qrow .avatar.mask { background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .22); } .ask-it .qb, .ask-fcard .ask-it .qb, .wask.onfeed .ask-fcard .ask-it .qb { background: none; box-shadow: none; color: #fff; } .ask-it .qb b { color: rgba(255, 255, 255, .72); font-size: .6875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-bottom: .1875rem; } .ask-it .qb b.tap { color: #fff; } .ask-it .qb .tx { font-size: .9375rem; line-height: 1.35; } .ask-it .qb .rc { background: rgba(255, 255, 255, .16); color: #fff; } .ask-it .qb .rc.own { background: #fff; color: #5a3fd6; } .ask-it .qrow + .arow { padding-top: .5rem; } :root[data-theme="light"] .ask-it .qrow, :root[data-theme="light"] .ask-fcard .ask-it .qrow { background: rgba(0, 0, 0, .05); } :root[data-theme="light"] .ask-it .qrow .avatar.mask { background: linear-gradient(135deg, #6b6b78, #3a3a44); box-shadow: none; } :root[data-theme="light"] .ask-it .qb, :root[data-theme="light"] .ask-fcard .ask-it .qb { color: var(--color-text); background: none; } :root[data-theme="light"] .ask-it .qb b { color: var(--color-text-secondary); } :root[data-theme="light"] .ask-it .qb b.tap { color: var(--color-primary); } :root[data-theme="light"] .ask-it .qb .rc { background: var(--color-background-secondary, #f2f2f7); color: var(--color-text); } :root[data-theme="light"] .ask-it .qb .rc.own { background: var(--color-primary); color: #fff; } /* the contest chip says only «Конкурс»; when something is asked of the person it glows */ .contest-float.todo .cap { display: none; } /* ---- the comments foot as a row to tap (2026-10-07) ---------------------------------------------------------------- «N коментарів» spans the foot with a chevron at the right and a 2.75rem touch height; the chevron turns when open. */ .ask-it .ask-cm { padding: .25rem .875rem .625rem; cursor: pointer; } .ask-it .ask-cm-head, .ask-fcard .ask-cm-head, .wask.onfeed .ask-fcard .ask-cm-head { display: flex; width: 100%; height: 2.75rem; align-items: center; justify-content: flex-start; gap: .4375rem; padding: 0 .125rem; margin: 0; border-radius: .5rem; background: none; color: #fff; font-size: .875rem; font-weight: 600; cursor: pointer; } .ask-it .ask-cm-head svg { width: 1.125rem; height: 1.125rem; } .ask-it .ask-cm-head .chev { margin-left: auto; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; opacity: .75; transition: transform .2s ease; } .ask-it .ask-cm-head .chev svg { width: 1rem; height: 1rem; } .ask-it .ask-cm-head.on .chev { transform: rotate(180deg); } .ask-it .ask-cm-head:active { background: rgba(255, 255, 255, .1); } .ask-it .ask-cm-body { margin-top: .125rem; } :root[data-theme="light"] .ask-it .ask-cm-head, :root[data-theme="light"] .ask-fcard .ask-cm-head { color: var(--color-text); } :root[data-theme="light"] .ask-it .ask-cm-head:active { background: rgba(0, 0, 0, .05); } /* ---- a comment reads: the text a full size, the reactions as clear pills under it ---------------------------------- */ .ask-it .ask-cm-row .tx .t { font-size: 1rem; line-height: 1.4; } .ask-it .ask-cm-row .foot { margin-top: .375rem; } .ask-it .ask-cm-row .foot .reacts { gap: .3125rem; } .ask-it .ask-cm-row .foot .rc { height: 1.75rem; padding: 0 .625rem 0 .4375rem; border-radius: .875rem; gap: .3125rem; background: rgba(255, 255, 255, .22); color: #fff; font-size: .8125rem; font-weight: 700; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .18); } .ask-it .ask-cm-row .foot .rc .e { font-size: 1.0625rem; line-height: 1; } .ask-it .ask-cm-row .foot .rc.own { background: #fff; color: #5a3fd6; box-shadow: none; } :root[data-theme="light"] .ask-it .ask-cm-row .foot .rc { background: var(--color-background-secondary, #f2f2f7); color: var(--color-text); box-shadow: none; } :root[data-theme="light"] .ask-it .ask-cm-row .foot .rc.own { background: var(--color-primary); color: #fff; } /* the comment's avatar is a circle whatever the row does (2026-10-07, the user: «сжимается кружок») */ .ask-it .ask-cm-row .who { flex: none; max-width: 100%; } .ask-it .ask-cm-row .who .avatar, .ask-it .ask-cm-row .avatar.small { flex: 0 0 2rem; width: 2rem; height: 2rem; min-width: 2rem; max-width: 2rem; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; } .ask-it .ask-cm-row .who .avatar img { width: 100%; height: 100%; object-fit: cover; } /* ---- the wall's capsule in the footer's look (2026-10-07, the user) --------------------------------------------------- The same glass, the same radius and shadow as #tabs; the lit pane is the footer's blue word, no filled pill. */ .ask-bseg .ask-tabs { gap: 0; padding: .25rem; border-radius: 1.75rem; background: color-mix(in srgb, var(--color-tabbar) 72%, transparent); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .16), 0 0 0 .5px rgba(0, 0, 0, .08), inset 0 .5px 0 rgba(255, 255, 255, .5); } :root[data-theme="dark"] .ask-bseg .ask-tabs { box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .45), 0 0 0 .5px rgba(255, 255, 255, .12), inset 0 .5px 0 rgba(255, 255, 255, .08); } .ask-bseg .ask-tabs button { height: 2.5rem; border-radius: 1.5rem; font-size: .8125rem; font-weight: 600; letter-spacing: -.01em; color: #8E8E93; background: transparent; } .ask-bseg .ask-tabs button.on { background: transparent; color: var(--color-primary); } .ask-bseg .ask-tabs button:active { background: rgba(127, 127, 127, .12); } .ask-bseg .ask-tabs button .n { background: #8E8E93; color: #fff; } .ask-bseg .ask-tabs button.on .n { background: var(--color-primary); color: #fff; } /* the generic segment («.seg») paints the lit pane as a grey pill at a higher specificity — the footer look wins here */ .ask-bseg .ask-tabs button, .ask-bseg .seg.ask-tabs button { background: transparent !important; color: #8E8E93 !important; box-shadow: none !important; text-shadow: none !important; } .ask-bseg .ask-tabs button.on, .ask-bseg .seg.ask-tabs button.on { background: transparent !important; color: var(--color-primary) !important; } .ask-bseg .ask-tabs button:active, .ask-bseg .seg.ask-tabs button:active { background: rgba(127, 127, 127, .12) !important; } /* the name button's ripple clip (overflow hidden) was cutting the avatar circle's top and bottom (2026-10-07, the user) */ .ask-it .ask-cm-row .who.ripple, .ask-it .ask-cm-row .who { overflow: visible !important; min-height: 2rem; align-items: center; } .ask-it .ask-cm-row .who .ripple-wave { display: none; } .ask-it .ask-cm-row .who .avatar, .ask-it .ask-cm-row .avatar.small { flex: 0 0 2rem !important; width: 2rem !important; height: 2rem !important; border-radius: 50% !important; } /* the capsule's glass is the footer's glass in both themes (2026-10-07): an older dark-theme rule made it 94% solid */ .ask-bseg .ask-tabs, :root[data-theme="dark"] .ask-bseg .ask-tabs, :root[data-theme="light"] .ask-bseg .ask-tabs { background: color-mix(in srgb, var(--color-tabbar) 72%, transparent) !important; -webkit-backdrop-filter: saturate(180%) blur(24px) !important; backdrop-filter: saturate(180%) blur(24px) !important; } /* the quick giveaway «50 USDT за коментар» (2026-10-10): a hub card and a plain numbered list */ .hub-card.quick { --hc-a: #7ad3a3; --hc-b: #1f8a4c; --hc-c: #0f4a2a; --hc-live: #d8ffe8; } .hub-card .art.quick { position: relative; display: flex; align-items: center; justify-content: center; } .hub-card .art.quick .money { font-size: 2.75rem; filter: drop-shadow(0 .375rem .75rem rgba(0, 0, 0, .35)); transform: rotate(-8deg); } .hub-card .art.quick .tick { position: absolute; right: .5rem; bottom: .375rem; font-size: 1.75rem; transform: rotate(14deg); filter: drop-shadow(0 .25rem .5rem rgba(0, 0, 0, .35)); } .quick-pg { padding: .75rem 1rem calc(1rem + var(--tabbar-space, 0px)); display: flex; flex-direction: column; gap: .75rem; } .quick-head { display: flex; flex-direction: column; gap: .25rem; } .quick-head b { font-size: 1.5rem; } .quick-head span { font-size: .875rem; color: var(--color-text-secondary); line-height: 1.35; } .quick-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; } .quick-list li > * { display: flex; align-items: center; gap: .625rem; width: 100%; padding: .5rem .75rem; border-radius: .75rem; border: 0; font: inherit; color: inherit; text-align: left; background: var(--color-bg-secondary, rgba(127, 127, 127, .12)); white-space: nowrap; overflow: hidden; } .quick-list li b { min-width: 2rem; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; } .quick-list li span { flex: 1; overflow: hidden; text-overflow: ellipsis; } .quick-list li em { font-style: normal; font-size: .875rem; color: var(--color-accent, #3390ec); } .quick-win { display: flex; flex-direction: column; gap: .25rem; background: linear-gradient(135deg, #1f8a4c, #166b3a); color: #fff; } .quick-win b { font-size: 1.125rem; } .quick-win span { font-size: .875rem; line-height: 1.35; opacity: .92; } .quick-list li.win > * { background: #1f8a4c; color: #fff; } .quick-list li.win b, .quick-list li.win em { color: #fff; } /* 2026-10-15, «100 USDT»: the person's own ticket — a blue card on top and their row in the list; «winners soon» after 18:00 */ .quick-places { display: flex; gap: .375rem; margin: .375rem 0 .125rem; } .quick-places .pl { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .125rem; padding: .5rem .25rem; border-radius: .75rem; background: var(--color-bg-secondary, rgba(127, 127, 127, .12)); white-space: nowrap; } .quick-places .pl b { font-size: .75rem; font-weight: 600; color: var(--color-text-secondary); } .quick-places .pl i { font-style: normal; font-size: 1rem; font-weight: 700; } .quick-places .pl:first-child i { color: var(--color-primary); } .quick-pg .capsule.quick-go { margin: 0; width: 100%; background: var(--color-primary); color: #fff; font-weight: 600; } .quick-pg .capsule.quick-go svg { width: 1.125rem; height: 1.125rem; } .quick-list li.flash > * { animation: quick-flash 1.6s ease-out both; } @keyframes quick-flash { 0% { box-shadow: 0 0 0 .25rem var(--color-primary), 0 0 0 .5rem color-mix(in srgb, var(--color-primary) 35%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } } .quick-soon { display: flex; flex-direction: column; gap: .25rem; background: linear-gradient(135deg, #d98e2b, #b36f14); color: #fff; } .quick-soon b { font-size: 1.125rem; } .quick-soon span { font-size: .875rem; line-height: 1.35; opacity: .92; } .quick-list li.mine > * { background: var(--color-accent, #3390ec); color: #fff; } .quick-list li.mine b, .quick-list li.mine em { color: #fff; } /* ---- a record reads «who said what» (2026-10-10, the user: «кто что написал, без дат») ----------------------------- The face is bigger, the name is a real name (not a small caps label), the university sits beside it in place of the date; the words stay the main thing. */ .ask-it .arow .avatar.own, .ask-fcard .ask-it .avatar.own, .wask.onfeed .ask-fcard .ask-it .avatar.own { width: 2.375rem; height: 2.375rem; font-size: 1.0625rem; } .ask-it .hd, .ask-fcard .ask-it .hd { display: flex; align-items: baseline; justify-content: flex-start; flex-wrap: wrap; gap: .125rem .5rem; margin-bottom: .1875rem; } .ask-it .ab .hd b, .ask-fcard .ask-it .ab .hd b { display: inline; font-size: .9375rem; font-weight: 700; letter-spacing: -.01em; text-transform: none; color: #fff; opacity: 1; margin: 0; } .ask-it .ab .hd b.tap .go { margin-left: .125rem; opacity: .7; } .ask-it .hd .sub { font-size: .75rem; font-weight: 500; color: rgba(255, 255, 255, .72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .ask-it .ab .tx { font-size: 1rem; line-height: 1.4; } :root[data-theme="light"] .ask-it .ab .hd b { color: var(--color-text); } :root[data-theme="light"] .ask-it .hd .sub { color: var(--color-text-secondary); } /* ---- «Стрічка» loads the next page by itself (2026-10-10): the sentinel shows three breathing dots, or a retry line ---- */ .ask-fmore.wait { min-height: 2.25rem; padding: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; color: rgba(255, 255, 255, .85); font-size: .8125rem; cursor: default; } .ask-fmore.wait:not(.retry)::before { content: ""; width: 2.25rem; height: .5rem; background: radial-gradient(circle, currentColor 2.5px, transparent 3px) 0 50% / .75rem .5rem repeat-x; animation: ask-dots 1s linear infinite; opacity: .7; } .ask-fmore.wait.retry { padding: 0 1rem; background: rgba(0, 0, 0, .3); color: #fff; cursor: pointer; } :root[data-theme="light"] .wask.onfeed .ask-fmore.wait { color: #fff; } @keyframes ask-dots { 0%, 100% { opacity: .35; } 50% { opacity: .9; } } /* ---- the capsule over the footer is the footer's twin by construction (2026-10-10, the owner: «выровняй») ------------ The same height, the same side insets, the same radius and padding, one tab-bar gap between them; the buttons fill the capsule's height, so no older rule can make it shorter than the footer on any phone. */ .ask-bseg { left: .75rem !important; right: .75rem !important; bottom: calc(var(--tabbar-space) + var(--tabbar-gap)) !important; } .ask-bseg .ask-tabs, .ask-bseg .seg.ask-tabs { box-sizing: border-box; height: var(--tabbar-height) !important; min-height: var(--tabbar-height); margin: 0 !important; padding: .25rem !important; border-radius: 1.75rem !important; } .ask-bseg .ask-tabs button, .ask-bseg .seg.ask-tabs button { height: 100% !important; min-height: 0; border-radius: 1.5rem !important; } body.ownwall .wall-chat.asking .ask-bseg { bottom: calc(var(--safe-bottom) + var(--tabbar-gap)) !important; } /* ---- «Шахи» (2026-10-15) and the Campus cards made lower (the user: «карточки по высоте меньше») ----------------- */ .hub-card { min-height: 5.25rem; padding: .625rem 0 .625rem .875rem; gap: .375rem; } .hub-card .tx { gap: .2rem; } .hub-card .tx b { font-size: 1.125rem; } .hub-card .tx .sub { font-size: .6875rem; line-height: 1.25; } .hub-card .live { margin-top: .125rem; padding: .2rem .625rem .2rem .5rem; font-size: .75rem; } .hub-card .art { width: 7.25rem; } .hub-card .art.durak .pc { --w: 2.8rem; --h: 3.95rem; } .hub-card .art.flirt { transform: scale(.86); transform-origin: center; } .hub-card .art.anon { transform: scale(.86); transform-origin: center; } .hub-card.chess { --hc-a: #8d9bb8; --hc-b: #4a5a7a; --hc-c: #232c42; --hc-live: #ffd166; } .hub-card .art.chess { display: flex; align-items: center; justify-content: center; } .hub-card .art.chess .mini { display: grid; grid-template-columns: repeat(4, 1.125rem); grid-auto-rows: 1.125rem; transform: rotate(-8deg); border-radius: .25rem; overflow: hidden; box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .35), 0 0 0 .125rem rgba(0, 0, 0, .3); } .hub-card .art.chess .mini i { display: block; position: relative; } .hub-card .art.chess .mini i.l { background: #f0d9b5; } .hub-card .art.chess .mini i.d { background: #b58863; } .hub-card .art.chess .mini .cp { position: absolute; inset: .05rem; } .hub-card:active .art.chess .mini { transition: transform .2s ease; transform: rotate(-4deg) scale(1.04); } /* the pieces: the «cburnett» set (CC BY-SA 3.0), see web/vendor/LICENSES.txt */ .cp { display: block; background: center / contain no-repeat; } .cp.wK { background-image: url("pieces/wK.svg"); } .cp.wQ { background-image: url("pieces/wQ.svg"); } .cp.wR { background-image: url("pieces/wR.svg"); } .cp.wB { background-image: url("pieces/wB.svg"); } .cp.wN { background-image: url("pieces/wN.svg"); } .cp.wP { background-image: url("pieces/wP.svg"); } .cp.bK { background-image: url("pieces/bK.svg"); } .cp.bQ { background-image: url("pieces/bQ.svg"); } .cp.bR { background-image: url("pieces/bR.svg"); } .cp.bB { background-image: url("pieces/bB.svg"); } .cp.bN { background-image: url("pieces/bN.svg"); } .cp.bP { background-image: url("pieces/bP.svg"); } /* the board screen: the Durak felt, the talk strip and the log; the bars and the board of its own */ .ch-table.waiting .ch-bar, .ch-table.waiting .ch-boardbox, .ch-table.waiting .ch-status, .ch-table.waiting .ch-acts { display: none; } .ch-bar { flex: none; position: relative; display: flex; align-items: center; gap: .625rem; min-height: 3.25rem; padding: .375rem 1rem; } .ch-bar .avatar { flex: none; width: 2.5rem; height: 2.5rem; font-size: 1rem; box-shadow: 0 .2rem .5rem rgba(0, 0, 0, .35); transition: box-shadow .25s ease; } .ch-bar .avatar.away { opacity: .55; filter: grayscale(.6); } .ch-bar.turn .avatar { box-shadow: 0 0 0 .2rem var(--dk-gold); } .ch-bar .who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; } .ch-bar .who b { font-size: .9375rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ch-bar .who span { font-size: .75rem; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ch-bar .clk { flex: none; min-width: 4.75rem; padding: .3rem .625rem; border-radius: .625rem; background: rgba(0, 0, 0, .35); font-size: 1.375rem; font-weight: 800; font-variant-numeric: tabular-nums; text-align: center; letter-spacing: .02em; opacity: .7; transition: opacity .2s ease, background .2s ease, color .2s ease; } .ch-bar .clk:empty { display: none; } .ch-bar .clk.run { opacity: 1; background: #fff; color: #1c1c1e; box-shadow: 0 0 0 .1875rem var(--dk-gold); } .ch-bar .clk.low { color: #ff6b61; } .ch-bar .clk.run.low { background: #ff3b30; color: #fff; box-shadow: 0 0 0 .1875rem rgba(255, 59, 48, .4); animation: ch-low 1s ease-in-out infinite; } @keyframes ch-low { 50% { transform: scale(1.06); } } .ch-bar.empty { opacity: .6; } .ch-bar .dk-emo { left: 2rem; top: -.25rem; } .ch-boardbox { flex: none; display: flex; justify-content: center; padding: .125rem .5rem; } .ch-board { display: grid; grid-template-columns: repeat(8, 1fr); width: min(100%, calc(100dvh - 22.5rem), 30rem); aspect-ratio: 1; border-radius: .5rem; overflow: hidden; box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .4), 0 0 0 .25rem rgba(0, 0, 0, .25); touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; } .ch-board .sq { position: relative; aspect-ratio: 1; } .ch-board .sq.light { background: #f0d9b5; } .ch-board .sq.dark { background: #b58863; } .ch-board .sq .rk, .ch-board .sq .fl { position: absolute; font-style: normal; font-size: .5625rem; font-weight: 700; line-height: 1; opacity: .75; pointer-events: none; z-index: 2; } .ch-board .sq .rk { top: .125rem; left: .1875rem; } .ch-board .sq .fl { bottom: .125rem; right: .1875rem; } .ch-board .sq.light .rk, .ch-board .sq.light .fl { color: #b58863; } .ch-board .sq.dark .rk, .ch-board .sq.dark .fl { color: #f0d9b5; } .ch-board .sq.last { box-shadow: inset 0 0 0 100vmax rgba(155, 199, 0, .41); } .ch-board .sq.sel { box-shadow: inset 0 0 0 100vmax rgba(20, 85, 30, .5); } .ch-board .sq.chk { background: radial-gradient(ellipse at center, rgba(255, 0, 0, 1) 0%, rgba(231, 0, 0, 1) 25%, rgba(169, 0, 0, 0) 89%, rgba(158, 0, 0, 0) 100%); } .ch-board .sq.dot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 30%; height: 30%; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(20, 85, 30, .5); z-index: 1; } .ch-board .sq.cap::after { content: ""; position: absolute; inset: 0; box-sizing: border-box; border: .3rem solid rgba(20, 85, 30, .5); border-radius: 50%; z-index: 1; } .ch-board .sq .cp { position: absolute; inset: 3%; z-index: 1; pointer-events: none; } .ch-table.watching .ch-board { pointer-events: none; } .ch-status { flex: none; min-height: 1.25rem; padding: .25rem 1rem 0; text-align: center; font-size: .9375rem; font-weight: 600; } .ch-status:empty { display: none; } .ch-acts { flex: none; display: flex; justify-content: center; gap: .5rem; padding: .375rem 1rem 0; } .ch-acts .btn.small { height: 2.125rem; min-width: 5.5rem; font-size: .9375rem; } .ch-acts .btn.secondary { background: rgba(255, 255, 255, .16); color: #fff; } .ch-acts .btn.danger { color: #ffb4ae; } .ch-table .dk-log { max-height: 5rem; } .ch-table .dk-over .acts { display: flex; flex-direction: column; gap: .5rem; } .ch-table .dk-over .prow .delta { margin-left: auto; } .ch-wait .seats { display: flex; justify-content: center; gap: 1.5rem; } .ch-wait .seat.away .avatar { opacity: .5; filter: grayscale(.6); } /* typing (the keyboard up): the board shrinks to a thumbnail, the bars tighten, the talk and the field get the room — the Durak way */ .ch-table.typing .ch-boardbox { padding: 0; } .ch-table.typing .ch-board { width: 7.5rem; border-radius: .25rem; box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .35); } .ch-table.typing .ch-board .sq .rk, .ch-table.typing .ch-board .sq .fl { display: none; } .ch-table.typing .ch-bar { min-height: 2.25rem; padding: .125rem 1rem; } .ch-table.typing .ch-bar .avatar { width: 1.75rem; height: 1.75rem; font-size: .75rem; } .ch-table.typing .ch-bar .who b { font-size: .8125rem; } .ch-table.typing .ch-bar .who span { font-size: .6875rem; } .ch-table.typing .ch-bar .clk { font-size: 1rem; padding: .15rem .5rem; min-width: 3.5rem; } .ch-table.typing .ch-acts, .ch-table.typing .ch-status { display: none; } .ch-table.typing .dk-log { max-height: 3.4rem; } @media (max-height: 640px) { .ch-board { width: min(100%, calc(100dvh - 19rem), 30rem); } .ch-bar .clk { font-size: 1.125rem; } .ch-table .dk-log { max-height: 3rem; } } /* 2026-10-16: a post's TEXT under the spoiler — the same sparkling cover as the photo, the words blurred until a tap; and the «🔞 Контент 18+» mark over a post whose photo or text is hidden (the user: «чтобы ещё писало Контент 18+») */ .spoiler.sp-text { display: block; min-height: 2.75rem; border-radius: .625rem; } .spoiler.sp-text > .text { filter: blur(7px); transform: none; user-select: none; -webkit-user-select: none; transition: filter .35s ease; } .spoiler.sp-text.open > .text { filter: none; user-select: text; -webkit-user-select: text; } .spoiler.sp-text .cover { background: rgba(0, 0, 0, .05); border-radius: inherit; } .adult-mark { display: inline-flex; align-items: center; gap: .25rem; margin: .125rem 0 .375rem; padding: .1875rem .5625rem; border-radius: .75rem; background: rgba(255, 59, 48, .12); color: #ff3b30; font-size: .75rem; font-weight: 700; line-height: 1.3; letter-spacing: .01em; } .acard .text.sp-mark { outline: .125rem solid #ff3b30; outline-offset: .3125rem; border-radius: .25rem; } /* 2026-10-16: «Шахи» — the lobby in the steel blue of its card, a «Грати з ботом» button, time chips on the boards, the friends list; «твій хід» said loud at the board (a gold pill, the board and my avatar lit); the bot's avatar; «Кампус» cards one fixed height, lower (the user: «ещё меньше и все одинаковые») */ .ch-lobby .dk-head .felt { background: radial-gradient(110% 80% at 50% 0%, #8d9bb8 0, #4a5a7a 50%, #232c42 100%); } .ch-lobby .dk-head .btn.create { color: #232c42; } .ch-lobby .dk-head .btn.bot { width: 100%; height: 2.5rem; margin: 0; font-size: .875rem; font-weight: 700; color: #fff; background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .3); display: inline-flex; align-items: center; justify-content: center; gap: .4rem; } .ch-lobby .dk-head .btn.bot .ic { font-size: 1.125rem; line-height: 1; } .ch-lobby .dk-head .btn.code { grid-column: 1 / -1; height: 2.125rem; font-size: .8125rem; background: transparent; box-shadow: none; opacity: .8; } .ch-lobby .dk-head .rec { grid-column: 1 / -1; } .ch-lobby .dk-room .tcchip { flex: none; padding: .25rem .55rem; border-radius: .625rem; background: color-mix(in srgb, #4a5a7a 14%, var(--color-background)); color: #4a5a7a; font-size: .75rem; font-weight: 700; white-space: nowrap; } .ch-lobby .dk-room .tcchip.gray { background: var(--color-chat-hover); color: var(--color-text-secondary); } .ch-lobby .dk-room .btn.small:not(.secondary) { background: #4a5a7a; } .ch-lobby .dk-empty .btn.small { grid-column: 2; justify-self: start; margin-top: .375rem; height: 2rem; background: #4a5a7a; } .ch-lobby .dk-friends .btn.small:not(.secondary) { background: #4a5a7a; } .ch-lobby .dk-friends .btn.small:disabled { opacity: .55; } .ch-lobby .dk-friends .btn.finvite { background: color-mix(in srgb, #4a5a7a 12%, var(--color-background)); color: #4a5a7a; } .ch-invite .btn:not(.plain) { background: #4a5a7a; } .ch-invite .cards { background: radial-gradient(circle, rgba(74, 90, 122, .35), transparent 70%); } .avatar.robot { background: linear-gradient(160deg, #8d9bb8, #4a5a7a) !important; color: #fff; font-size: 1.25rem; } .avatar.small.robot { font-size: 1rem; } /* my move */ .ch-table .ch-status { min-height: 2rem; padding-top: .375rem; } .ch-table .ch-status .turnpill { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .875rem; border-radius: 1rem; background: rgba(0, 0, 0, .3); font-size: .875rem; font-weight: 600; transition: background .25s ease, color .25s ease; } .ch-table .ch-status .turnpill.mine { background: var(--dk-gold); color: #1c1c1e; font-weight: 800; animation: ch-mine 1.4s ease-in-out infinite; } .ch-table .ch-status .turnpill.mine::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: #1c1c1e; opacity: .7; } .ch-table .ch-status .turnpill.mine.chk { background: #ff3b30; color: #fff; } @keyframes ch-mine { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 209, 102, .65); } 50% { box-shadow: 0 0 0 .55rem rgba(255, 209, 102, 0); } } .ch-table.myturn .ch-board { box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .4), 0 0 0 .2rem var(--dk-gold), 0 0 1.5rem rgba(255, 209, 102, .35); } .ch-table.myturn .ch-bar.me .avatar { box-shadow: 0 0 0 .2rem var(--dk-gold), 0 0 1rem rgba(255, 209, 102, .6); } .ch-table.playing:not(.myturn):not(.watching) .ch-bar.me { opacity: .8; } .ch-table.playing.myturn .ch-bar.top { opacity: .8; } /* «Кампус»: one height for every card */ .hub-card { height: 4.75rem; min-height: 4.75rem; padding: .5rem 0 .5rem .875rem; } .hub-card .tx { gap: .15rem; } .hub-card .tx b { font-size: 1.0625rem; } .hub-card .tx .sub { -webkit-line-clamp: 1; font-size: .6875rem; line-height: 1.25; } .hub-card .live { margin-top: .1rem; padding: .15rem .5rem .15rem .45rem; font-size: .6875rem; } .hub-card .art { width: 6.5rem; } .hub-card .art.durak .pc { --w: 2.3rem; --h: 3.25rem; } .hub-card .art.flirt, .hub-card .art.anon { transform: scale(.74); } .hub-card .art.chess .mini { grid-template-columns: repeat(4, .9rem); grid-auto-rows: .9rem; } .hub-card .art.ask .mask { font-size: 2.25rem; } .hub-card .hub-badge { top: .5rem; right: .5rem; padding: .2rem .5rem; font-size: .75rem; } /* no chat at the bot's board (2026-10-16): the strip and the log are gone, the bot's own emoji still pop over its bar */ .ch-table.botgame .dk-say, .ch-table.botgame .dk-log { display: none !important; } .ch-table.botgame .dk-over { bottom: 0; } /* the sheet's title read as grey on grey (2026-10-16, the user: «текст сливается с фоном»): darker, a little bigger */ .sheet .stitle { color: var(--color-text); font-size: .9375rem; font-weight: 600; opacity: .85; padding: .875rem 1.25rem .5rem; } /* 2026-10-16 evening, the user's notes from the phone: — at the bot's board the ✨ effects stay («анимированные эмодзи же»), only the words and the quick emoji go — the admin badge sat above the name's baseline in the lobbies and bars: the name is a flex row now, the badge centred — the chess ground is its own steel blue, not the Durak green */ .ch-table.botgame .dk-say { display: flex !important; } .ch-table.botgame .dk-say .emos, .ch-table.botgame .dk-say input, .ch-table.botgame .dk-say .go { display: none !important; } .ch-table.botgame .dk-say::after { content: "кинь ботові ефект — він не образиться"; align-self: center; margin-left: .25rem; font-size: .8125rem; opacity: .7; } .dk-room .top .info > b, .dk-friends .frow .tx > b, .dk-top .trow .tx > b, .ch-bar .who > b, .ch-wait .seat > b, .dk-wait .seat > b, .dk-opps .opp > b, .dk-bar .who > b, .dk-over .prow > b { display: flex; align-items: center; gap: .3rem; min-width: 0; } .adm-mark b, .adm-mark.with-label b { display: inline-flex !important; width: 1.2em !important; min-width: 1.2em; height: 1.2em; gap: 0; } .dk-room .top .info b .adm-mark, .dk-friends .frow .tx b .adm-mark, .dk-top .trow .tx b .adm-mark, .ch-bar .who b .adm-mark, .ch-wait .seat b .adm-mark, .dk-wait .seat b .adm-mark, .dk-opps .opp b .adm-mark, .dk-bar .who b .adm-mark, .dk-over .prow b .adm-mark { margin-left: 0; vertical-align: 0; } .adm-mark { vertical-align: middle; } .ch-table .felt { background: radial-gradient(90% 70% at 50% 35%, #7f8db0 0, #46567a 55%, #1e2740 100%); } .ch-lobby .dk-head .felt { background: radial-gradient(110% 80% at 50% 0%, #8d9bb8 0, #4a5a7a 50%, #232c42 100%); } .ch-table .ch-acts .btn.secondary { background: rgba(255, 255, 255, .14); } .ch-table .dk-over .btn:not(.secondary) { background: #4a5a7a; } .ch-table .dk-wait .codebox b, .ch-wait .codebox b { color: var(--dk-gold); } .ch-table .codebox .hint, .ch-table .codebox .cap { color: rgba(255, 255, 255, .88); } .ch-table .waitline { color: rgba(255, 255, 255, .92); } /* 2026-10-16: «Стрічка» — the heart instead of the emoji chips (the user: «как в тредсе»): an outline that fills red with a pop and six dots flying out; the count sits beside it. Comments in the feed get a small one. */ .ask-it.likeonly .ab .foot, .ask-it.likeonly .ask-cm-row .foot { display: flex !important; } .ask-it.likeonly .qb .foot { display: none !important; } .ask-it .like { display: inline-flex; align-items: center; gap: .3rem; height: 1.75rem; padding: 0 .5rem 0 .25rem; margin-left: -.25rem; border-radius: .875rem; background: transparent; color: rgba(255, 255, 255, .92); font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; position: relative; } .ask-it .like .ic { position: relative; width: 1.375rem; height: 1.375rem; display: grid; place-items: center; } .ask-it .like svg { width: 1.25rem; height: 1.25rem; fill: transparent; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; transition: fill .18s ease, stroke .18s ease, transform .18s ease; } .ask-it .like:active svg { transform: scale(.85); } .ask-it .like.on svg { fill: #ff3b5c; stroke: #ff3b5c; } .ask-it .like.on { color: #ff6b85; } .ask-it .like.pop svg { animation: like-pop .5s cubic-bezier(.2, .9, .3, 1.4); } @keyframes like-pop { 0% { transform: scale(.4); } 45% { transform: scale(1.35); } 70% { transform: scale(.92); } 100% { transform: scale(1); } } .ask-it .like .ic i { position: absolute; left: 50%; top: 50%; width: .3rem; height: .3rem; margin: -.15rem 0 0 -.15rem; border-radius: 50%; background: #ff3b5c; opacity: 0; pointer-events: none; } .ask-it .like.pop .ic i { animation: like-dot .55s ease-out forwards; } .ask-it .like .ic .d0 { --a: 0deg; } .ask-it .like .ic .d1 { --a: 60deg; background: #ffb347; } .ask-it .like .ic .d2 { --a: 120deg; } .ask-it .like .ic .d3 { --a: 180deg; background: #ffd166; } .ask-it .like .ic .d4 { --a: 240deg; } .ask-it .like .ic .d5 { --a: 300deg; background: #ff8fab; } @keyframes like-dot { 0% { transform: rotate(var(--a)) translateY(0) scale(1); opacity: 1; } 100% { transform: rotate(var(--a)) translateY(-1.1rem) scale(.2); opacity: 0; } } .ask-it .like.small { height: 1.5rem; font-size: .75rem; gap: .2rem; } .ask-it .like.small svg { width: 1.05rem; height: 1.05rem; } :root[data-theme="light"] .ask-it .like { color: var(--color-text-secondary); } :root[data-theme="light"] .ask-it .like.on { color: #ff3b5c; } /* threads in the comments: a reply hangs under its parent on a thin line */ .ask-it .ask-cm-row.reply { margin-left: 1.625rem; position: relative; } .ask-it .ask-cm-row.reply::before { content: ""; position: absolute; left: -1rem; top: -.5rem; width: .6875rem; height: 1.5rem; border-left: 2px solid rgba(255, 255, 255, .38); border-bottom: 2px solid rgba(255, 255, 255, .38); border-bottom-left-radius: .625rem; pointer-events: none; } .ask-it .ask-cm-row.reply + .ask-cm-row.reply::before { top: -.75rem; height: 1.75rem; } .ask-it .ask-cm-row .reto { display: inline-flex; align-items: center; gap: .125rem; margin: 0 0 .125rem; padding: 0; background: none; color: rgba(255, 255, 255, .75); font: inherit; font-size: .75rem; } .ask-it .ask-cm-row .reto b { font-weight: 700; color: rgba(255, 255, 255, .9); } :root[data-theme="light"] .ask-it .ask-cm-row.reply::before { border-color: rgba(0, 0, 0, .18); } :root[data-theme="light"] .ask-it .ask-cm-row .reto, :root[data-theme="light"] .ask-it .ask-cm-row .reto b { color: var(--color-text-secondary); } /* 2026-10-16: the premium cut of the effects — the flash, the shockwave, the vignette, the rays, the comet, the afterimages, the rim-light on the one hit, a short quake (the user: «эффекты детские — сделай супер вау») */ .fx-flash { position: fixed; z-index: 9988; pointer-events: none; background: radial-gradient(ellipse at center, var(--rc, #fff) 0%, color-mix(in srgb, var(--rc, #fff) 55%, transparent) 35%, transparent 72%); mix-blend-mode: screen; will-change: opacity; } .fx-shock { position: fixed; z-index: 9989; width: 7rem; height: 7rem; border-radius: 50%; border: 4px solid var(--rc, #fff); box-shadow: 0 0 1.25rem var(--rc, #fff), inset 0 0 1rem var(--rc, #fff); pointer-events: none; will-change: transform, opacity; } .fx-vignette { position: fixed; z-index: 9987; pointer-events: none; background: radial-gradient(ellipse at center, transparent 42%, color-mix(in srgb, var(--vc, #000) 80%, transparent) 100%); will-change: opacity; } .fx-rays { position: fixed; z-index: 9988; pointer-events: none; border-radius: 50%; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rc, #ffd54f) 60%, transparent) 0deg 5deg, transparent 5deg 16deg); -webkit-mask: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .65) 38%, transparent 70%); mask: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .65) 38%, transparent 70%); will-change: transform, opacity; } .fx-comet { position: fixed; z-index: 9990; pointer-events: none; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--rc, #fff) 85%, #fff) 0%, color-mix(in srgb, var(--rc, #fff) 45%, transparent) 38%, transparent 68%); filter: blur(3px); will-change: transform, opacity; } .fx-ghost { opacity: .45; filter: blur(.5px) saturate(1.3); } .fx-lit { box-shadow: 0 0 0 .2rem var(--fx-c, #ffd54f), 0 0 1.5rem var(--fx-c, #ffd54f), 0 0 3rem color-mix(in srgb, var(--fx-c, #ffd54f) 50%, transparent) !important; transition: box-shadow .3s ease; } .fx-quake-s { animation: fxQuakeS .45s ease; } @keyframes fxQuakeS { 0%, 100% { transform: none; } 20% { transform: translate(-3px, 2px); } 40% { transform: translate(3px, -2px); } 60% { transform: translate(-2px, -1px); } 80% { transform: translate(2px, 1px); } } .fx-lite .fx-flash, .fx-lite .fx-vignette, .fx-lite .fx-rays, .fx-lite .fx-comet, .fx-lite .fx-ghost { display: none; } /* the heart must not be clipped by anything around it (2026-10-16, the user: «при нажатии обрезается») */ .ask-it .like, .ask-it .like .ic, .ask-it.likeonly .ab .foot, .ask-it.likeonly .ask-cm-row .foot, .ask-it.likeonly .reacts { overflow: visible !important; } .ask-it .like { padding-top: .25rem; padding-bottom: .25rem; height: auto; min-height: 1.75rem; border: 0; } .ask-it .like svg { stroke-linecap: round; overflow: visible; } .ask-it .like.pop .ic { animation: like-pop .5s cubic-bezier(.2, .9, .3, 1.4); } .ask-it .like.pop svg { animation: none; } /* the heart's pop must paint over the neighbours, never under the comments bar (2026-10-16, the user: «под блоком») */ .ask-it.likeonly .ab .foot, .ask-it.likeonly .ask-cm-row .foot { position: relative; z-index: 4; } .ask-it .like { position: relative; z-index: 5; } .ask-it .like.pop { z-index: 6; } /* the walls list: rows off screen cost no layout or paint while a page slides over them (2026-10-16) */ .ask-card.row-item { content-visibility: auto; contain-intrinsic-size: auto 4.5rem; } /* 2026-10-16 late: the names under the seats are centred again (the flex name row had pulled «Ти» and the badge left); nothing around the heart clips its pop, two-line texts included */ .ch-wait .seat > b, .dk-wait .seat > b { justify-content: center; width: 100%; text-align: center; } .dk-over .prow > b { justify-content: flex-start; } .ask-it.likeonly, .ask-it.likeonly .arow, .ask-it.likeonly .ab, .ask-it.likeonly .ab .tx, .ask-it.likeonly .ask-cm-row, .ask-it.likeonly .ask-cm-row .tx, .ask-it.likeonly .ask-cm-body { overflow: visible !important; } .ask-it.likeonly .ab .foot, .ask-it.likeonly .ask-cm-row .foot { padding-bottom: .125rem; margin-bottom: -.125rem; } /* the heart's layer lives inside its card only (2026-10-16, the user: «перекрывают шапку при скролле») */ .ask-it.likeonly { isolation: isolate; } .ask-it.likeonly .ab .foot, .ask-it.likeonly .ask-cm-row .foot { z-index: 1; } .ask-it .like { z-index: 2; } .ask-it .like.pop { z-index: 3; } /* a folded branch: one line with a stub of the thread line */ .ask-it .ask-cm-branch { display: inline-flex; align-items: center; gap: .5rem; margin: -.125rem 0 .25rem 1.625rem; padding: .25rem .5rem .25rem 0; background: none; color: rgba(255, 255, 255, .85); font: inherit; font-size: .8125rem; font-weight: 600; position: relative; } .ask-it .ask-cm-branch .ln { width: 1.25rem; height: 2px; background: rgba(255, 255, 255, .38); border-radius: 1px; margin-left: -1rem; } :root[data-theme="light"] .ask-it .ask-cm-branch { color: var(--color-primary); } :root[data-theme="light"] .ask-it .ask-cm-branch .ln { background: rgba(0, 0, 0, .18); } /* the seats in the waiting room (2026-10-16): the name is a plain centred line again (the flex row cut «Ти»), the badge sits on it; the host's crown is drawn over the avatar, not behind it */ .ch-wait .seat > b, .dk-wait .seat > b { display: block; width: 100%; justify-content: normal; } .dk-wait .seat > b .adm-mark { vertical-align: -.15em; margin-left: .2rem; } .dk-wait .seat .crown { z-index: 2; } /* ============================================================================================================ 2026-10-16 night — «Стрічка» as Threads (the user: «дизайн 1 в 1 как в тредсе, тёмный и светлый»): a flat list on a plain ground (near-black / white). A record is a thread: the question on top as the parent post (its face, «Хтось спитав» or the asker's name, the words), a thread line down to the owner's answer (face, name bold + the uni in grey, the words, the heart row). Hairlines between records; replies hang under the answer with their own faces. Only the feed pane (.wask.onfeed). ============================================================================================================ */ .wask.onfeed { --th-bg: #101010; --th-text: #f3f5f7; --th-grey: #8a8f98; --th-line: rgba(255, 255, 255, .16); --th-card: #1c1c1e; --th-av: 2.25rem; --th-col: 3rem; } :root[data-theme="light"] .wask.onfeed { --th-bg: #ffffff; --th-text: #000000; --th-grey: #999999; --th-line: rgba(0, 0, 0, .13); --th-card: #f2f2f7; } .wall-chat.asking.onfeed .chat-bg { display: none !important; } .wall-chat.asking.onfeed { background: #101010; } :root[data-theme="light"] .wall-chat.asking.onfeed { background: #fff; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) { background: var(--th-bg); color: var(--th-text); } /* the strip of faces on top: no shadows, the plain ground is enough */ .wask.onfeed .ask-strip .chip > span { color: var(--th-text); text-shadow: none; } .wask.onfeed .ask-strip .chip .avatar { box-shadow: 0 0 0 2px var(--th-bg), 0 0 0 3px var(--th-line); } .wask.onfeed .ask-strip .chip .ic { background: var(--th-card); color: var(--th-text); box-shadow: inset 0 0 0 .5px var(--th-line); backdrop-filter: none; -webkit-backdrop-filter: none; } .wask.onfeed .empty, .wask.onfeed .empty .strong { color: var(--th-grey); text-shadow: none; } .wask.onfeed .empty .strong { color: var(--th-text); } .wask.onfeed .ask-fmore { background: transparent; color: var(--th-grey); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } /* the record */ :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard { margin: 0; padding: 0 .875rem; border-radius: 0; background: transparent; box-shadow: none; border-bottom: .5px solid var(--th-line); } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it { position: relative; margin: 0; border-radius: 0; background: none !important; box-shadow: none; color: var(--th-text); display: flex; flex-direction: column; overflow: visible; padding: 0; } /* the parent: the question */ :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .qrow { order: 1; position: relative; margin: 0; padding: .75rem 0 .375rem; border: 0; border-radius: 0; background: none; gap: .75rem; align-items: flex-start; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .qrow .avatar { width: var(--th-av); height: var(--th-av); font-size: 1rem; margin: 0; flex: none; box-shadow: 0 0 0 .5px var(--th-line); background: var(--th-card); color: var(--th-text); } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .qrow .avatar.mask { font-size: 1.125rem; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .qrow::after { content: ""; position: absolute; left: calc(var(--th-av) / 2 - 1px); top: calc(.75rem + var(--th-av) + .25rem); bottom: -.5rem; width: 2px; border-radius: 1px; background: var(--th-line); } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .qb { flex: 1; min-width: 0; padding: 0; color: var(--th-text); background: none; box-shadow: none; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .qb b { display: block; margin: 0 0 .125rem; font-size: .9375rem; font-weight: 600; color: var(--th-text); opacity: 1; line-height: 1.25; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .qb b.tap { text-decoration: none; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .qb .tx { font-size: .9375rem; line-height: 1.4; color: var(--th-text); white-space: pre-wrap; word-break: break-word; } /* the answer: the owner, on the thread line */ :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .arow { order: 2; flex-direction: row-reverse; justify-content: flex-end; align-items: flex-start; gap: .75rem; margin: 0; padding: .75rem 0 .25rem; background: none; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .arow .avatar.own { width: var(--th-av); height: var(--th-av); font-size: 1rem; margin: 0; flex: none; box-shadow: 0 0 0 .5px var(--th-line); } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ab { flex: 1; min-width: 0; max-width: none; padding: 0; background: none; box-shadow: none; color: var(--th-text); } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ab .hd { display: flex; align-items: baseline; gap: .375rem; margin: 0 0 .125rem; min-height: 1.25rem; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ab .hd b { display: inline-flex; align-items: center; gap: .2rem; margin: 0; font-size: .9375rem; font-weight: 600; color: var(--th-text); opacity: 1; line-height: 1.25; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ab .hd b .go { color: var(--th-grey); font-weight: 400; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ab .hd .sub { font-size: .8125rem; color: var(--th-grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ab .tx { font-size: .9375rem; line-height: 1.4; color: var(--th-text); white-space: pre-wrap; word-break: break-word; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ab .foot { margin: .375rem 0 0 -.25rem; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .like { color: var(--th-text); font-size: .8125rem; font-weight: 500; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .like.on { color: #ff3040; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .like.on svg { fill: #ff3040; stroke: #ff3040; } /* replies: the count line under the answer, then the rows with their own faces */ :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm { order: 3; margin: 0; padding: 0 0 .5rem; border: 0; background: none; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-head { margin: 0 0 0 var(--th-col); padding: .125rem 0 .375rem; background: none !important; color: var(--th-grey); font-size: .8125rem; font-weight: 500; justify-content: flex-start; gap: .375rem; width: auto; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-head.on { color: var(--th-text); } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-head svg { width: .9375rem; height: .9375rem; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-head .chev { margin-left: .25rem; opacity: .6; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-body { position: relative; margin: 0; padding: 0; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row { margin: 0; padding: .5rem 0 .25rem; border: 0; border-radius: 0; background: none !important; color: var(--th-text); gap: .75rem; position: relative; align-items: flex-start; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row .avatar { width: var(--th-av); height: var(--th-av); font-size: 1rem; margin: 0; flex: none; box-shadow: 0 0 0 .5px var(--th-line); } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row .tx { flex: 1; min-width: 0; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row .hd { display: flex; align-items: baseline; gap: .375rem; margin: 0 0 .125rem; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row .who { color: var(--th-text); margin: 0; padding: 0; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row .who .avatar { display: none; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row .who b { font-size: .9375rem; font-weight: 600; text-decoration: none; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row time { color: var(--th-grey); font-size: .8125rem; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row .tx .t { color: var(--th-text); font-size: .9375rem; line-height: 1.4; white-space: pre-wrap; word-break: break-word; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row .re { border-left-color: var(--th-line); color: var(--th-grey); } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row .re b { color: var(--th-text); } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row .reto, :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row .reto b { color: var(--th-grey); } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row.reply { margin-left: var(--th-col); } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row.reply::before { border-color: var(--th-line); left: calc(-1 * var(--th-col) + var(--th-av) / 2 - 1px); top: -.25rem; width: calc(var(--th-col) - var(--th-av) / 2 - .25rem); height: 1.75rem; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-branch { margin: 0 0 .25rem var(--th-col); color: var(--th-grey); } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-branch .ln { background: var(--th-line); } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row .foot { margin-top: .125rem; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row .like { color: var(--th-grey); } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row .like.on { color: #ff3040; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-more, :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-need { background: none; color: var(--th-grey); border: .5px solid var(--th-line); border-radius: 1rem; margin: .25rem 0 .25rem var(--th-col); } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-form { margin: .375rem 0 0; gap: .5rem; align-items: flex-end; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-form textarea { background: var(--th-card); color: var(--th-text); border: .5px solid var(--th-line); border-radius: 1.125rem; padding: .5rem .875rem; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-form textarea::placeholder { color: var(--th-grey); } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-send { background: var(--th-text); color: var(--th-bg); } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-reply { background: var(--th-card); color: var(--th-text); border: .5px solid var(--th-line); margin: 0 0 .375rem; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-cnt { color: var(--th-grey); } /* the reply rows in the Threads feed: the face in the left column (it lives inside the name button, so it is placed absolutely) */ :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row .tx { position: relative; padding-left: var(--th-col); min-height: var(--th-av); } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row .who .avatar { display: block; position: absolute; left: 0; top: 0; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row .who { position: static; } /* the comments icon beside the heart (Threads) */ .ask-it.likeonly .ab .foot { justify-content: flex-start; align-items: center; gap: .125rem; } .ask-it.likeonly .ab .foot .ask-cm-head.ic { display: inline-flex; align-items: center; gap: .3rem; width: auto; margin: 0 0 0 .5rem; padding: .25rem .5rem; border-radius: 1rem; background: none !important; color: inherit; font-size: .8125rem; font-weight: 500; } .ask-it.likeonly .ab .foot .ask-cm-head.ic svg { width: 1.25rem; height: 1.25rem; stroke-width: 1.8; } .ask-it.likeonly .ab .foot .ask-cm-head.ic .chev { display: none; } .ask-it.likeonly .ab .foot .ask-cm-head.ic .n:empty { display: none; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ab .foot .ask-cm-head.ic { color: var(--th-text); margin-left: .5rem; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ab .foot .ask-cm-head.ic.on { color: var(--th-text); } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm { padding-top: 0; } /* the thread page (2026-10-16): the feed's Threads skin on a plain page */ .th-page-body { background: #101010; } :root[data-theme="light"] .th-page-body { background: #fff; } .th-page { min-height: 100%; padding-bottom: calc(1rem + var(--safe-bottom, 0px)); } .th-page .wask.onfeed .ask-fcard { border-bottom: 0; } .th-page .wask.onfeed .ask-fcard .ask-it .ab .foot .ask-cm-head.ic { pointer-events: auto; } /* tighter, like Threads (2026-10-16, the user): the face closer to the words, the heart and the bubble side by side */ :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) { --th-col: 2.75rem; --th-av: 2.125rem; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .qrow, :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .arow, :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row { gap: .625rem; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .qrow { padding: .625rem 0 .25rem; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .qrow::after { top: calc(.625rem + var(--th-av) + .2rem); } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .arow { padding: .625rem 0 .125rem; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ab .hd { margin-bottom: .0625rem; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ab .foot { margin: .25rem 0 0 -.375rem; gap: 0; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .like { padding: .25rem .375rem; gap: .25rem; min-height: 1.5rem; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .like svg { width: 1.2rem; height: 1.2rem; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ab .foot .ask-cm-head.ic { margin-left: .125rem; padding: .25rem .375rem; gap: .25rem; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ab .foot .ask-cm-head.ic svg { width: 1.2rem; height: 1.2rem; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm { padding-bottom: .375rem; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row { padding: .4375rem 0 .125rem; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row .foot { margin-top: 0; } /* even tighter (2026-10-16, the user: «ещё компактнее, буквы в аватаре вылазят») */ :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .avatar { font-size: .875rem !important; line-height: 1; letter-spacing: 0; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .avatar.mask { font-size: 1rem !important; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .arow { padding: .5rem 0 0; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .qrow { padding: .5rem 0 .125rem; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ab .hd, :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row .hd { margin: 0; min-height: 0; line-height: 1.25; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ab .tx, :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row .tx .t, :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .qb .tx { margin: .0625rem 0 0; font-size: .9375rem; line-height: 1.3; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ab .foot { margin: .0625rem 0 0 -.375rem; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .like, :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ab .foot .ask-cm-head.ic { padding: .125rem .375rem; min-height: 1.375rem; height: auto; font-size: .8125rem; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .like svg, :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ab .foot .ask-cm-head.ic svg { width: 1.125rem; height: 1.125rem; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm { padding-bottom: .25rem; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row { padding: .375rem 0 0; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row .foot { margin: -.0625rem 0 0 -.375rem; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row time { font-size: .75rem; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row .reto { margin: 0 0 .0625rem; font-size: .75rem; } /* replies to replies stay in the same column, as Threads keeps them; the «↪ кому» line says whom they answer */ :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row.reply { margin-left: 0; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row.reply::before { display: none; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-branch { margin: .125rem 0 .125rem var(--th-col); } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-branch .ln { display: none; } /* the feed carries no head of my own wall any more; the profile button beside the bell leads there (2026-10-16) */ .wask.onfeed > .ask-panel .ask-top, .wask.onfeed .ask-panel .ask-top, .wask.onfeed .ask-panel .ask-mine.make { display: none !important; } .wask.onfeed > .ask-panel { --fold: 0px; } .hprof { margin-left: .125rem; } .hprof svg { width: 1.375rem; height: 1.375rem; } /* hairlines between replies, and the field pinned at the bottom of the thread page (2026-10-16, the user) */ :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row { border-top: .5px solid var(--th-line); padding: .5rem 0 .25rem; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-body { margin: .25rem -.875rem 0; padding: 0 .875rem; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-branch { border-top: .5px solid var(--th-line); margin: 0; padding: .5rem 0 .375rem var(--th-col); width: 100%; justify-content: flex-start; } .th-page .wask.onfeed .ask-fcard .ask-it .ask-cm-form { position: sticky; bottom: 0; z-index: 5; margin: .5rem -.875rem 0; padding: .5rem .875rem calc(.5rem + var(--safe-bottom, 0px)); background: var(--th-bg); border-top: .5px solid var(--th-line); } .th-page .wask.onfeed .ask-fcard .ask-it .ask-cm-form textarea { flex: 1; min-height: 2.25rem; } .th-page .wask.onfeed .ask-fcard .ask-it .ask-cm-reply { margin: .375rem 0 0; } .th-page .wask.onfeed .ask-fcard .ask-it .ask-cm-cnt { padding: 0 .875rem; } .th-page .wask.onfeed .ask-fcard .ask-it .ask-cm { padding-bottom: 0; } /* a record without a question wears the class «post» too, which the channel post card styles (margin 8px): not here (2026-10-16) */ :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ab.post { margin: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; max-width: none; width: auto; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ab.post { overflow: visible; position: static; } .ask-it.likeonly .ab.post { overflow: visible !important; margin: 0; } /* the thread page: no quote blocks (the parent is right above), only a grey «↪ кому» for a reply to a reply; the record is tappable */ :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row .re { display: none; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row .reto { display: inline-flex; align-items: center; gap: .25rem; margin: 0 0 .125rem; padding: 0; background: none; font-size: .8125rem; color: var(--th-grey); } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row .reto b { color: var(--th-grey); font-weight: 600; } .wall-chat .wask.onfeed .ask-fcard .ask-it, .onth .ask-fcard .ask-it { cursor: pointer; } .wall-chat .wask.onfeed .ask-fcard:active .ask-it, .onth .ask-fcard:active .ask-it { opacity: .85; } /* the thread page: the record ends, a line and a «Відповіді» label, then the replies (2026-10-16, the user: «не видно, что ветка начинается») */ .th-page .wask.onfeed .ask-fcard .ask-it .ab .foot { padding-bottom: .5rem; } .th-page .wask.onfeed .ask-fcard .ask-it .ask-cm-body { margin-top: .25rem; border-top: 1px solid var(--th-line); } .th-page .wask.onfeed .ask-fcard .ask-it .ask-cm-body::before { content: "Відповіді"; display: block; padding: .875rem 0 .125rem; color: var(--th-text); font-size: .9375rem; font-weight: 700; } .th-page .wask.onfeed .ask-fcard .ask-it .ask-cm-body > .ask-cm-row:first-of-type { border-top: 0; } .th-page .wask.onfeed .ask-fcard .ask-it .ask-cm-head.ic { pointer-events: none; } /* the thread page: the field sits at the bottom even when the replies are few (a flex chain down to the form) */ .th-page-body { display: flex; flex-direction: column; } .th-page, .th-page > .wask.onfeed, .th-page .wask.onfeed > .ask-fcard, .th-page .wask.onfeed .ask-fcard > .ask-it, .th-page .wask.onfeed .ask-fcard .ask-it > .ask-cm, .th-page .wask.onfeed .ask-fcard .ask-it .ask-cm-body { display: flex; flex-direction: column; flex: 1 0 auto; } .th-page { padding-bottom: 0; } .th-page .wask.onfeed .ask-fcard .ask-it .ask-cm-form { margin-top: auto; } /* 2026-10-16 ~21:00 — replies to a reply nested the Threads way (the user's screenshot): indented under the parent, a line down from the parent's face with a curve into each nested face, smaller faces inside, hairlines only between root replies */ :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row.reply { margin-left: var(--th-col); border-top: 0; padding: .5rem 0 .25rem; position: relative; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row.reply .avatar { width: 2rem; height: 2rem; font-size: .875rem !important; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row.reply .tx { padding-left: 2.75rem; min-height: 2rem; } /* the trunk: from the parent's face straight down past every nested reply… */ :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row.reply::before { content: ""; display: block; position: absolute; left: calc(-1 * var(--th-col) + var(--th-av) / 2 - 1px); top: -.75rem; bottom: 0; width: 2px; height: auto; border: 0; border-radius: 0; background: var(--th-line); } /* …stopping at the curve of the last one */ :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row.reply:not(:has(+ .ask-cm-row.reply))::before { bottom: auto; height: calc(.75rem + .5rem + 1rem); } /* the curve into this reply's face */ :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row.reply::after { content: ""; position: absolute; left: calc(-1 * var(--th-col) + var(--th-av) / 2 - 1px); top: .5rem; width: calc(var(--th-col) - var(--th-av) / 2 - .125rem); height: 1rem; border-left: 2px solid var(--th-line); border-bottom: 2px solid var(--th-line); border-bottom-left-radius: 1rem; pointer-events: none; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row.reply .reto { display: none; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row.reply .foot { margin-left: 2.375rem; } /* the folded branch: faces of the repliers and «Показати відповіді», on the trunk's stub */ :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-branch { display: flex; align-items: center; gap: .5rem; margin: 0 0 .125rem var(--th-col); padding: .375rem 0 .5rem; border: 0; width: auto; color: var(--th-grey); font-size: .875rem; font-weight: 500; position: relative; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-branch .ln { display: block; position: absolute; left: calc(-1 * var(--th-col) + var(--th-av) / 2 - 1px); top: -.75rem; width: 2px; height: 1.25rem; margin: 0; background: var(--th-line); border-radius: 1px; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-branch .faces { display: inline-flex; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-branch .faces .avatar { width: 1.5rem; height: 1.5rem; font-size: .625rem !important; box-shadow: 0 0 0 2px var(--th-bg); } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-branch .faces .avatar + .avatar { margin-left: -.5rem; } /* the reply faces are flex boxes again (display:block had pushed the initial into the corner) */ :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row .who .avatar { display: flex; align-items: center; justify-content: center; } /* the branch lines, measured (2026-10-16 ~20:05): the trunk starts under the parent's face (drawn by the parent row), runs through every nested row, ends at the last curve; every curve lands on the centre of its face; the hearts in nested rows sit under their words */ :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row:not(.reply):has(+ .ask-cm-row.reply)::after { content: ""; position: absolute; left: calc(var(--th-av) / 2 - 1px); top: calc(.625rem + var(--th-av) + .125rem); bottom: 0; width: 2px; background: var(--th-line); border-radius: 1px; pointer-events: none; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row.reply::before { top: 0; bottom: 0; height: auto; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row.reply:not(:has(+ .ask-cm-row.reply))::before { bottom: auto; height: 1.5rem; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row.reply::after { top: .5rem; height: 1rem; width: calc(var(--th-col) - var(--th-av) / 2 - 1px); } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row.reply .foot { margin-left: -.375rem; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-branch .ln { top: 0; height: .875rem; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row:not(.reply):has(+ .ask-cm-branch)::after { content: ""; position: absolute; left: calc(var(--th-av) / 2 - 1px); top: calc(.625rem + var(--th-av) + .125rem); bottom: 0; width: 2px; background: var(--th-line); border-radius: 1px; pointer-events: none; } /* the composer keeps its width (the negative margins had pushed the send button out), a tappable comment */ .th-page .wask.onfeed .ask-fcard .ask-it .ask-cm-form { width: auto; box-sizing: border-box; } .th-page .wask.onfeed .ask-fcard .ask-it .ask-cm-form .ask-cm-send { flex: none; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row { cursor: pointer; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row:active { opacity: .85; } /* the trunk and the curves share one x (centred on the face with a transform, no -1px rounding), so the junctions do not notch */ :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row:not(.reply):has(+ .ask-cm-row.reply)::after, :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row:not(.reply):has(+ .ask-cm-branch)::after { left: calc(var(--th-av) / 2); transform: translateX(-50%); border-radius: 0; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row.reply::before { left: calc(-1 * var(--th-col) + var(--th-av) / 2); transform: translateX(-50%); border-radius: 0; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row.reply::after { left: calc(-1 * var(--th-col) + var(--th-av) / 2 - 1px); } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-branch .ln { left: calc(-1 * var(--th-col) + var(--th-av) / 2); transform: translateX(-50%); border-radius: 0; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row.reply + .ask-cm-branch .ln { top: 0; height: .875rem; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row.reply:has(+ .ask-cm-branch)::before { bottom: 0; height: auto; } /* the bubble beside the heart on a comment */ .ask-it .like.cmre svg { fill: none; stroke: currentColor; } .ask-it .like.cmre.on svg { fill: none; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row .foot { justify-content: flex-start; gap: 0; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row .like.cmre { color: var(--th-grey); margin-left: .125rem; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row { cursor: default; } /* the comment field is a textarea: it must flex like the old input did, or it pushes the send button out (2026-10-16) */ .ask-cm-form textarea { flex: 1 1 auto; min-width: 0; width: auto; box-sizing: border-box; } .ask-cm-form .ask-cm-send { flex: none; } .th-page .wask.onfeed .ask-fcard .ask-it .ask-cm-form { display: flex; align-items: flex-end; gap: .5rem; } /* 2026-10-16 ~21:15 Kyiv — the wall head on a wall page (someone's and my own): compact, and it never folds on scroll (the user) */ .layer:has(.ask-wallbg.onth) .ask-top, .wall-chat.asking.onth .ask-top { --fold: 0px !important; transform: none !important; padding: .5rem .875rem .5rem; } .layer:has(.ask-wallbg.onth) .ask-top .head, .wall-chat.asking.onth .ask-top .head { gap: .625rem; padding-right: 5.5rem; } .layer:has(.ask-wallbg.onth) .ask-top .avatar.hero, .wall-chat.asking.onth .ask-top .avatar.hero { width: 2.75rem; height: 2.75rem; font-size: 1.125rem; box-shadow: 0 0 0 .125rem rgba(255, 255, 255, .8), 0 .25rem .75rem rgba(0, 0, 0, .3); } .layer:has(.ask-wallbg.onth) .ask-top .t b, .wall-chat.asking.onth .ask-top .t b { font-size: 1rem; } .layer:has(.ask-wallbg.onth) .ask-top .t .sub, .wall-chat.asking.onth .ask-top .t .sub { font-size: .75rem; } .layer:has(.ask-wallbg.onth) .ask-top .t .ask-views, .wall-chat.asking.onth .ask-top .t .ask-views { margin-top: .25rem; transform: scale(.9); transform-origin: left center; } .layer:has(.ask-wallbg.onth) .ask-top .line, .wall-chat.asking.onth .ask-top .line { margin-top: .25rem; font-size: .8125rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; } .layer:has(.ask-wallbg.onth) .ask-top .ask-tiles, .wall-chat.asking.onth .ask-top .ask-tiles { margin-top: .375rem; gap: .375rem; } .layer:has(.ask-wallbg.onth) .ask-top .ask-tiles .tile, .wall-chat.asking.onth .ask-top .ask-tiles .tile { min-height: 2rem; padding: .25rem .5rem; font-size: .75rem; } .layer:has(.ask-wallbg.onth) .ask-top > .ask-rate.corner.corner, .wall-chat.asking.onth .ask-top > .ask-rate.corner.corner { top: .375rem; right: .625rem; transform: scale(.9); transform-origin: right top; } .layer:has(.ask-wallbg.onth) .ask-top .line-more, .wall-chat.asking.onth .ask-top .line-more { display: none; } .wall-chat.asking.onth .ask-panel.folded .ask-top, .wall-chat.asking.onth .ask-panel.folded .ask-tabs { transform: none !important; } /* 2026-10-16 ~21:20 Kyiv — no branch lines for now (the user: «без этих полосок»): nested replies sit indented under their comment, a touch smaller, with air between them; hairlines only between root comments */ :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row.reply::before, :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row.reply::after, :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row:not(.reply)::after, :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-branch .ln { display: none !important; content: none !important; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row.reply { margin-left: var(--th-col); padding: .375rem 0 .25rem; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row:not(.reply) + .ask-cm-row.reply { margin-top: .125rem; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-branch { margin-left: var(--th-col); padding: .25rem 0 .5rem; border-top: 0; } /* 2026-10-16 ~21:30 Kyiv — the wall page (.layer.th): no Telegram ground at all, plain near-black / white; the compact head keyed by it; the composer's send button sits in the flow (it was absolutely placed and iOS put it off screen); the call-to-write button */ .layer.th > .chat-bg { display: none !important; } .layer.th { background: #101010; } :root[data-theme="light"] .layer.th { background: #fff; } .layer.th > .scroll { background: transparent; } .layer.th .ask-wallbg { background: none; padding-bottom: 1rem; } .layer.th .ask-wallbg.ghost .qb, .layer.th .ask-wallbg.ghost .ab { background: rgba(128, 128, 128, .18); } .layer.th .wall-none { color: #8a8f98; } .layer.th .wall-none b { color: inherit; } .layer.th .ask-top { --fold: 0px !important; transform: none !important; padding: .5rem .875rem .5rem; } .layer.th .ask-top .head { gap: .625rem; padding-right: 5.5rem; } .layer.th .ask-top .avatar.hero { width: 2.75rem; height: 2.75rem; font-size: 1.125rem; } .layer.th .ask-top .t b { font-size: 1rem; } .layer.th .ask-top .t .sub { font-size: .75rem; } .layer.th .ask-top .line { margin-top: .25rem; font-size: .8125rem; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; } .layer.th .ask-top .ask-tiles { margin-top: .375rem; gap: .375rem; } .layer.th .ask-top .ask-tiles .tile { min-height: 2rem; padding: .25rem .5rem; font-size: .75rem; } .layer.th .ask-top .line-more { display: none; } .th-page .wask.onfeed .ask-fcard .ask-it .ask-cm-form .ask-cm-send, .ask-it.likeonly .ask-cm-form .ask-cm-send { position: static; right: auto; bottom: auto; top: auto; flex: none; margin: 0; } .ask-it .ask-cm-cta { display: inline-flex; align-items: center; gap: .5rem; margin: .75rem 0 .25rem var(--th-col, 3.25rem); padding: .5rem .875rem; border-radius: 1rem; border: .5px solid var(--th-line, rgba(255,255,255,.16)); background: var(--th-card, #1c1c1e); color: var(--th-text, #f3f5f7); font: inherit; font-size: .875rem; font-weight: 600; } .ask-it .ask-cm-cta svg { width: 1.125rem; height: 1.125rem; } .th-page .wask.onfeed .ask-fcard .ask-it .ask-cm-body::before { content: "Відповіді"; } .ask-it .ask-cm-cta.small { margin: .125rem 0 .5rem var(--th-col, 3.25rem); padding: .375rem .75rem; font-size: .8125rem; font-weight: 500; background: none; color: var(--th-grey, #8a8f98); border-color: var(--th-line, rgba(255,255,255,.16)); } .ask-it .ask-cm-cta.small svg { width: 1rem; height: 1rem; } /* 2026-10-16 ~21:50 Kyiv — the wall head on a wall page, tighter still, and nothing on it moves on scroll; no purple ghosts while it loads */ .layer.th .ask-top { padding: .375rem .875rem .5rem; } .layer.th .ask-top .head { gap: .5rem; padding-right: 4.75rem; } .layer.th .ask-top .avatar.hero { width: 2.75rem; height: 2.75rem; font-size: 1.125rem; } /* the same size while the wall loads as once it is drawn — the head used to jump (2026-10-23, the owner) */ .layer.th .ask-top .t b { font-size: .9375rem; line-height: 1.2; } .layer.th .ask-top .t .sub { font-size: .6875rem; margin-top: 0; } .layer.th .ask-top .meta { margin-top: .25rem; transform: scale(.88); transform-origin: left center; } .layer.th .ask-top > .ask-rate.corner.corner { top: .375rem; right: .75rem; transform: scale(.85); transform-origin: right top; } .layer.th .ask-top .line { margin-top: .125rem; font-size: .8125rem; line-height: 1.3; -webkit-line-clamp: 1; cursor: pointer; } .layer.th .ask-top .ask-tiles { margin-top: .375rem; gap: .375rem; } .layer.th .ask-top .ask-tiles .tile { height: 2rem; min-height: 2rem; padding: 0 .5rem; border-radius: .625rem; } .layer.th .ask-top .ask-tiles .tile svg { width: 1rem; height: 1rem; } .layer.th .ask-top .ask-tiles .tile span { font-size: .8125rem; } .layer.th .ask-top.folded, .layer.th .ask-top.folded * { transform: none !important; opacity: 1 !important; } .layer.th .ask-wallbg.ghost .ask-it { background: none !important; box-shadow: none; } .layer.th .ask-wallbg.ghost .avatar { background: rgba(128, 128, 128, .18); } .layer.th .ask-wallbg.ghost .bar.title { background: rgba(128, 128, 128, .18); } /* the whole «Стіна» tab (Стрічка, Моя стіна, Запитання) without the Telegram ground; the ground stays in chats only (2026-10-16, the user) */ .wall-chat.asking .chat-bg { display: none !important; } .wall-chat.asking { background: #101010; } :root[data-theme="light"] .wall-chat.asking { background: #fff; } .wall-chat.asking .wask { background: transparent; } .wask.onwall .empty, .wask.onwall .empty .strong { text-shadow: none; } /* 2026-10-16 ~22:05 Kyiv — the wall-skin block that a failed patch script never wrote (tokens for .onth, the record frame, bigger faces) */ .onth { --th-bg: #101010; --th-text: #f3f5f7; --th-grey: #8a8f98; --th-line: rgba(255, 255, 255, .16); --th-card: #1c1c1e; --th-av: 2.5rem; --th-col: 3.25rem; } :root[data-theme="light"] .onth { --th-bg: #ffffff; --th-text: #000000; --th-grey: #999999; --th-line: rgba(0, 0, 0, .13); --th-card: #f2f2f7; } .ask-wallbg.onth { padding: 0 0 1rem; background: none; } .ask-wallbg.onth > .group-title { color: var(--th-grey); padding: .75rem .875rem .25rem; } .onth .ask-fcard { margin: 0; padding: 0 .875rem; border-radius: 0; background: transparent; box-shadow: none; border-bottom: .5px solid var(--th-line); } .onth .ask-fcard .ask-it { margin: 0; } .onth .ask-fcard.in { animation: ask-in .38s cubic-bezier(.2, .8, .2, 1) both; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) { --th-av: 2.5rem; --th-col: 3.25rem; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .qrow, :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .arow, :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row { gap: .75rem; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .qrow { padding: .875rem 0 .375rem; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .qrow::after { top: calc(.875rem + var(--th-av) + .25rem); } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .arow { padding: .875rem 0 .125rem; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ab .tx, :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .qb .tx, :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row .tx .t { margin-top: .125rem; line-height: 1.4; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ab .foot { margin-top: .375rem; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm { padding-bottom: .625rem; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .avatar { font-size: 1rem !important; } /* the nested replies again, after the size bump (the block above re-declares row padding) */ :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row.reply { margin-left: var(--th-col); padding: .375rem 0 .25rem; border-top: 0; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row.reply .avatar { width: 2rem; height: 2rem; font-size: .875rem !important; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row.reply .tx { padding-left: 2.75rem; min-height: 2rem; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row.reply::before, :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row.reply::after, :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row:not(.reply)::after { display: none !important; content: none !important; } /* the dock (2026-10-16): the «Відповідаємо …» strip and the field stick to the bottom as one and rise with the keyboard together */ .th-page .wask.onfeed .ask-fcard .ask-it .ask-cm-form { position: static; margin: 0; padding: 0; border: 0; background: none; } .th-page .wask.onfeed .ask-fcard .ask-it .ask-cm-dock { position: sticky; bottom: 0; z-index: 5; margin: .5rem -.875rem 0; padding: .5rem .875rem calc(.5rem + var(--safe-bottom, 0px)); background: var(--th-bg); border-top: .5px solid var(--th-line); display: flex; flex-direction: column; gap: .375rem; width: auto; box-sizing: border-box; } .th-page .wask.onfeed .ask-fcard .ask-it .ask-cm-dock .ask-cm-reply { margin: 0; } .th-page .wask.onfeed .ask-fcard .ask-it .ask-cm-dock { margin-top: auto; } .th-page .wask.onfeed .ask-fcard .ask-it .ask-cm-form { margin-top: 0; } .ask-it .ask-cm-dock { display: flex; flex-direction: column; gap: .375rem; } .ask-it .ask-cm-cta.small { margin: 0 0 .25rem var(--th-col, 3.25rem); } /* 2026-10-16 ~22:20 Kyiv — «Кампус» as full-width bands (the user: «капсулы на всю ширину без скруглений, склеить, супер мега кайф»): no radius, no gaps, hairlines between, a glass gloss across each band, a taller band with a bigger art */ .hub-cards { gap: 0; padding: 0; margin-top: -.5rem; } .hub-card { height: 5.75rem; min-height: 5.75rem; padding: .75rem 0 .75rem 1.125rem; border-radius: 0 !important; box-shadow: none; gap: .5rem; } .hub-card + .hub-card { border-top: 1px solid rgba(255, 255, 255, .1); } .hub-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, .05) 28%, rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .12) 100%); pointer-events: none; } .hub-card .glow { width: 14rem; height: 14rem; right: -4rem; top: -4rem; } .hub-card .tx { gap: .2rem; } .hub-card .tx b { font-size: 1.25rem; letter-spacing: -.015em; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); } .hub-card .tx .sub { font-size: .75rem; opacity: .92; } .hub-card .live { margin-top: .2rem; padding: .2rem .625rem .2rem .5rem; font-size: .75rem; } .hub-card .art { width: 7.5rem; } .hub-card .art.durak .pc { --w: 2.6rem; --h: 3.7rem; } .hub-card .art.flirt, .hub-card .art.anon { transform: scale(.86); } .hub-card .art.chess .mini { grid-template-columns: repeat(4, 1.05rem); grid-auto-rows: 1.05rem; } .hub-card .art.ask .mask { font-size: 2.6rem; } .hub-card .hub-badge { top: .625rem; right: .75rem; } .hub-card:active { transform: none; filter: brightness(1.08); } #tab-hub > .dk-back-strip { margin: .75rem .875rem 0; } #tab-hub > .capsule.wide { margin: .875rem .875rem 0; width: calc(100% - 1.75rem); } /* the head's second row: views · follow · … rating at the right (2026-10-16) */ .ask-top .meta.withrate { display: flex; align-items: center; gap: .375rem; flex-wrap: nowrap; transform: none; } .ask-top .meta.withrate .ask-rate.inline { position: static; margin-left: auto; flex: none; } .layer.th .ask-top .meta.withrate { margin-top: .375rem; transform: none; } .layer.th .ask-top .head { padding-right: 0; } .wall-chat.asking .ask-top.own .head { padding-right: 0; } /* the band grows with its three lines instead of letting the live pill sit on the subtitle (2026-10-16) */ .hub-card { height: auto; min-height: 5.75rem; } .hub-card .tx { justify-content: center; gap: .25rem; padding: .125rem 0; } .hub-card .tx .sub { -webkit-line-clamp: 1; line-height: 1.3; } .hub-card .live { align-self: flex-start; flex: none; } /* the wall head (2026-10-16 ~22:30 Kyiv): the rating in the top-right corner ON THE LINE of the views and «Стежити» pills, which sit to its left */ .layer.th .ask-top > .ask-rate.corner.corner { top: calc(.375rem + 2.25rem + .5rem); right: .875rem; transform: none; } .layer.th .ask-top .meta { margin-top: .5rem; transform: none; padding-right: 5.5rem; gap: .375rem; min-height: 1.75rem; align-items: center; } .layer.th .ask-top .head { padding-right: 0; } .wall-chat.asking .ask-top.own > .ask-rate.corner.corner { transform: none; } /* the corner rating on the pills' line — the earlier :has() rule outranked the last one, so these are pinned (2026-10-16) */ .layer.th .ask-top > .ask-rate.corner.corner { top: 3.7rem !important; right: .875rem !important; transform: none !important; } .layer.th .ask-top .meta { min-height: 1.75rem; } /* the rating back up in the very corner, compact (2026-10-16, the user: «справа в углу сверху компактно») */ .layer.th .ask-top > .ask-rate.corner.corner { top: .5rem !important; right: .75rem !important; transform: scale(.85) !important; transform-origin: right top; } .layer.th .ask-top .head { padding-right: 4.5rem; } .layer.th .ask-top .meta { padding-right: 0; margin-top: .375rem; } /* 2026-10-16 ~22:50 Kyiv — the wall head as one top row: face, name/uni, then views · Стежити · rating at the right */ .ask-top.toprow .head { padding-right: 0 !important; align-items: center; gap: .5rem; } .ask-top.toprow .head .t { flex: 1 1 auto; min-width: 0; } .ask-top.toprow .hright { display: flex; align-items: center; gap: .3rem; flex: none; margin-left: auto; } .ask-top.toprow .hright .meta { margin: 0 !important; padding: 0 !important; min-height: 0; transform: none !important; display: flex; align-items: center; gap: .3rem; flex-wrap: nowrap; } .ask-top.toprow .hright .ask-views, .ask-top.toprow .hright .ask-follow, .ask-top.toprow .hright .meta > * { height: 1.75rem; padding: 0 .5rem; font-size: .75rem; white-space: nowrap; } .ask-top.toprow .hright .ask-views span { display: none; } /* the number is enough on one row */ .ask-top.toprow .hright .ask-views svg { width: .875rem; height: .875rem; } .ask-top.toprow .hright .ask-rate.inline { position: static !important; transform: none !important; margin: 0; height: 1.75rem; } .ask-top.toprow .t b { font-size: .9375rem; } .ask-top.toprow .t .sub { font-size: .6875rem; } .layer.th .ask-top.toprow .line { margin-top: .375rem; } /* empty wall / empty questions: a soft gradient badge instead of the glasses (the user: «премиальнее») */ .layer.th .wall-none .mark, .wall-chat.asking .empty .mark { font-size: 0 !important; width: 4rem; height: 4rem; margin: 0 auto .875rem; border-radius: 1.25rem; background: linear-gradient(135deg, #8b7cff, #5a3fd6); box-shadow: 0 .75rem 2rem rgba(90, 63, 214, .35), inset 0 1px 0 rgba(255, 255, 255, .25); display: grid; place-items: center; } .layer.th .wall-none .mark::before, .wall-chat.asking .empty .mark::before { content: "✦"; font-size: 1.75rem; line-height: 1; color: #fff; } .layer.th .wall-none, .wall-chat.asking .empty { padding: 2.5rem 1.5rem; text-align: center; } .layer.th .wall-none b, .wall-chat.asking .empty .strong { display: block; font-size: 1.0625rem; font-weight: 700; color: #f3f5f7; margin-bottom: .25rem; } .layer.th .wall-none span, .wall-chat.asking .empty { color: #8a8f98; font-size: .9375rem; line-height: 1.4; } :root[data-theme="light"] .layer.th .wall-none b, :root[data-theme="light"] .wall-chat.asking .empty .strong { color: #000; } /* 2026-10-16 ~23:00 Kyiv — empty wall / empty questions, the premium take: a glow behind, a glass card, a floating gradient badge */ .layer.th .wall-none, .wall-chat.asking .empty { position: relative; margin: 1.25rem .875rem; padding: 2.25rem 1.5rem 2rem; border-radius: 1.5rem; background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); border: .5px solid rgba(255, 255, 255, .1); overflow: hidden; text-align: center; } .layer.th .wall-none::before, .wall-chat.asking .empty::before { content: ""; position: absolute; left: 50%; top: -3rem; width: 16rem; height: 10rem; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(139, 124, 255, .45), rgba(90, 63, 214, .15) 50%, transparent 72%); filter: blur(12px); pointer-events: none; } .layer.th .wall-none .mark, .wall-chat.asking .empty .mark { position: relative; width: 4.5rem; height: 4.5rem; margin: 0 auto 1rem; border-radius: 1.5rem; background: linear-gradient(135deg, #a89bff, #5a3fd6 70%, #4b2fd0); box-shadow: 0 1rem 2.5rem rgba(90, 63, 214, .45), inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 0 .5rem rgba(139, 124, 255, .12); animation: emptyFloat 3.2s ease-in-out infinite; } .layer.th .wall-none .mark::before, .wall-chat.asking .empty .mark::before { font-size: 2rem; text-shadow: 0 .25rem .75rem rgba(0, 0, 0, .3); } @keyframes emptyFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.375rem); } } .layer.th .wall-none b, .wall-chat.asking .empty .strong { position: relative; font-size: 1.125rem; letter-spacing: -.01em; margin-bottom: .375rem; } .layer.th .wall-none span, .wall-chat.asking .empty { position: relative; font-size: .9375rem; } :root[data-theme="light"] .layer.th .wall-none, :root[data-theme="light"] .wall-chat.asking .empty { background: linear-gradient(180deg, rgba(90, 63, 214, .06), rgba(90, 63, 214, .02)); border-color: rgba(0, 0, 0, .08); } @media (prefers-reduced-motion: reduce) { .layer.th .wall-none .mark, .wall-chat.asking .empty .mark { animation: none; } } /* the three pills on the head row: one height, one size, one line (2026-10-16, the user) */ .ask-top.toprow .hright { gap: .25rem; align-items: center; } .ask-top.toprow .hright .ask-views, .ask-top.toprow .hright .ask-follow, .ask-top.toprow .hright .ask-rate.inline { display: inline-flex; align-items: center; gap: .25rem; height: 1.625rem !important; min-height: 0; padding: 0 .5rem !important; border-radius: .8125rem; font-size: .75rem !important; line-height: 1; margin: 0 !important; box-sizing: border-box; } .ask-top.toprow .hright .ask-views b, .ask-top.toprow .hright .ask-follow b, .ask-top.toprow .hright .ask-rate.inline b { font-size: .75rem !important; font-weight: 700; line-height: 1; } .ask-top.toprow .hright .ask-views svg, .ask-top.toprow .hright .ask-follow svg, .ask-top.toprow .hright .ask-rate.inline svg, .ask-top.toprow .hright .ask-rate.inline .ri { width: .875rem !important; height: .875rem !important; font-size: .875rem; } .ask-top.toprow .hright .ask-follow span { display: none; } /* 2026-10-16 ~23:10 Kyiv — empty states without any icon; the «Запитати» button readable in both themes; an empty wall page does not scroll */ .layer.th .wall-none .mark, .wall-chat.asking .empty .mark { display: none !important; } .layer.th .wall-none, .wall-chat.asking .empty { padding: 1.75rem 1.5rem 1.625rem; } .layer.th .wall-none { color: #f3f5f7; text-shadow: none; max-width: none; } .layer.th .wall-none span { color: #8a8f98; opacity: 1; } :root[data-theme="light"] .layer.th .wall-none { color: #000; } :root[data-theme="light"] .layer.th .wall-none span { color: #666; } .layer.th .wall-none .wall-ask { margin-top: 1rem; height: 2.5rem; padding: 0 1.25rem 0 1rem; border-radius: 1.25rem; background: var(--color-primary, #3390ec); color: #fff; font-size: .9375rem; font-weight: 600; box-shadow: 0 .5rem 1.25rem rgba(51, 144, 236, .35); } .layer.th .wall-none .wall-ask svg { width: 1.125rem; height: 1.125rem; color: #fff; } .layer.th > .scroll:has(.ask-wallbg.none) { overflow: hidden !important; overscroll-behavior: none; } .layer.th .ask-wallbg.none { padding-bottom: 0; } /* an empty «Моя стіна» does not scroll; the «Запитати» button on an empty wall is white-on-blue for real (2026-10-16) */ .wall-chat .wask.noscroll { overflow-y: hidden !important; } .layer.th .wall-none .wall-ask, .layer.th .wall-none .wall-ask * { color: #fff !important; text-shadow: none; } .layer.th .wall-none b { color: #f3f5f7; } :root[data-theme="light"] .layer.th .wall-none b { color: #000; } /* 2026-10-16 ~23:25 Kyiv — another wall's head pills: smaller still, one size, tight to the top-right corner; a share button under the empty questions */ .layer.th .ask-top.toprow { padding: .25rem .5rem .5rem .875rem; } .ask-top.toprow .hright { gap: .2rem; align-self: flex-start; margin-top: .125rem; } .ask-top.toprow .hright .ask-views, .ask-top.toprow .hright .ask-follow, .ask-top.toprow .hright .ask-rate.inline { height: 1.5rem !important; padding: 0 .4375rem !important; font-size: .6875rem !important; border-radius: .75rem; gap: .2rem; } .ask-top.toprow .hright .ask-views b, .ask-top.toprow .hright .ask-follow b, .ask-top.toprow .hright .ask-rate.inline b { font-size: .6875rem !important; } .ask-top.toprow .hright .ask-views svg, .ask-top.toprow .hright .ask-follow svg, .ask-top.toprow .hright .ask-rate.inline svg, .ask-top.toprow .hright .ask-rate.inline .ri { width: .8125rem !important; height: .8125rem !important; font-size: .8125rem; } .ask-top.toprow .head { align-items: flex-start; } .ask-top.toprow .head .t { padding-top: .125rem; } .wall-chat.asking .empty .ask-share-btn { display: inline-flex; align-items: center; gap: .5rem; margin: 1rem auto 0; height: 2.5rem; padding: 0 1.25rem 0 1rem; border-radius: 1.25rem; background: var(--color-primary, #3390ec); color: #fff; font-size: .9375rem; font-weight: 600; box-shadow: 0 .5rem 1.25rem rgba(51, 144, 236, .35); width: auto; } .wall-chat.asking .empty .ask-share-btn svg { width: 1.125rem; height: 1.125rem; } /* the no-scroll only while «Моя стіна» is the open pane (.onth on the parent); the feed and the questions scroll as always (2026-10-16) */ .wall-chat .wask.noscroll { overflow-y: auto !important; } .wall-chat.asking.onth .wask.noscroll { overflow-y: hidden !important; } /* «Дописи»: no entrance animation on the posts (2026-10-16, the user); chats keep theirs */ .wmsgs .msg, #tab-posts .msg, .wall-chat:not(.asking) .wmsgs .msg { animation: none !important; } /* a wall page drawn before its slide: no fade-in of the records either */ .layer.th .ask-wallbg.fresh .ask-fcard, .layer.th .ask-wallbg .ask-fcard.in { animation: none !important; } /* 2026-10-16 ~23:35 Kyiv — the loading wall in the Threads look: grey shimmering blocks (a face, two bars) instead of purple ghost bubbles */ @keyframes thShimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .layer.th .ask-wallbg.ghost { padding: 0; } .layer.th .ask-wallbg.ghost .bar.title { margin: .875rem .875rem .25rem; } .layer.th .ask-wallbg.ghost .ask-it { display: flex; flex-direction: column; gap: .75rem; padding: .875rem .875rem 1rem; margin: 0; border-bottom: .5px solid rgba(255, 255, 255, .12); background: none !important; opacity: 1 !important; } .layer.th .ask-wallbg.ghost .qrow, .layer.th .ask-wallbg.ghost .arow { display: flex; flex-direction: row !important; align-items: center; gap: .75rem; margin: 0; padding: 0; background: none; justify-content: flex-start; } .layer.th .ask-wallbg.ghost .arow { margin-left: 0; } .layer.th .ask-wallbg.ghost .avatar { width: 2.5rem; height: 2.5rem; flex: none; border-radius: 50%; color: transparent !important; background: linear-gradient(90deg, rgba(255, 255, 255, .08) 25%, rgba(255, 255, 255, .16) 50%, rgba(255, 255, 255, .08) 75%) !important; background-size: 200% 100% !important; animation: thShimmer 1.4s linear infinite; box-shadow: none; } .layer.th .ask-wallbg.ghost .qb, .layer.th .ask-wallbg.ghost .ab { height: .875rem !important; border-radius: .4375rem; background: linear-gradient(90deg, rgba(255, 255, 255, .08) 25%, rgba(255, 255, 255, .16) 50%, rgba(255, 255, 255, .08) 75%) !important; background-size: 200% 100% !important; animation: thShimmer 1.4s linear infinite; box-shadow: none; max-width: none; padding: 0; } .layer.th .ask-wallbg.ghost .ask-it:nth-child(3) .qb { width: 48% !important; } .layer.th .ask-wallbg.ghost .ask-it:nth-child(4) .ab { width: 70% !important; } .layer.th .ask-wallbg.ghost .ask-it:nth-child(3), .layer.th .ask-wallbg.ghost .ask-it:nth-child(4) { opacity: 1 !important; } :root[data-theme="light"] .layer.th .ask-wallbg.ghost .avatar, :root[data-theme="light"] .layer.th .ask-wallbg.ghost .qb, :root[data-theme="light"] .layer.th .ask-wallbg.ghost .ab { background: linear-gradient(90deg, rgba(0, 0, 0, .06) 25%, rgba(0, 0, 0, .12) 50%, rgba(0, 0, 0, .06) 75%) !important; background-size: 200% 100% !important; } :root[data-theme="light"] .layer.th .ask-wallbg.ghost .ask-it { border-bottom-color: rgba(0, 0, 0, .1); } .layer.th .ask-wallbg.ghost .arow { flex-direction: row-reverse !important; justify-content: flex-end; } .layer.th .ask-wallbg.ghost .bar.title { width: 5rem; height: .75rem; } /* «Відповіді» with nothing in them yet (2026-10-17): a quiet note under the heading instead of a blank page */ .th-page .wask.onfeed .ask-fcard .ask-it .ask-cm-body > .ask-cm-empty { display: flex; flex-direction: column; gap: .25rem; padding: 1.5rem 0 1.75rem; text-align: center; } .ask-cm-empty b { color: var(--th-text); font-size: 1rem; font-weight: 600; } .ask-cm-empty span { color: var(--th-grey); font-size: .875rem; } /* «5 хв» beside the name, Threads-style (2026-10-17): grey, after a dot, never pushed to the far edge */ .ask-it .hd time.ago { margin-left: 0; align-self: baseline; font-size: .8125rem; font-weight: 400; color: var(--th-grey, rgba(255, 255, 255, .55)); white-space: nowrap; } .ask-it .hd time.ago::before { content: "· "; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ab .hd time.ago { font-size: .8125rem; color: var(--th-grey); } .ask-it .ask-cm-row .hd time.ago { margin-left: auto; } .ask-it .ask-cm-row .hd time.ago::before { content: none; } /* Флірситет «Всі» (2026-10-18): the switch under the header, the gender filter, a three-column grid, the card's one pink pill */ .seg.flirt-seg { margin: .625rem .75rem .25rem; } .seg.flirt-fseg { margin: .25rem .75rem .375rem; padding: .125rem; } .seg.flirt-fseg button { height: 1.75rem; font-size: .75rem; } .fall-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .375rem; padding: .25rem .75rem 0; } .fall-tile { position: relative; aspect-ratio: 4 / 5; border-radius: .75rem; overflow: hidden; background: rgba(118, 118, 128, .14); } .fall-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .fall-tile .sh { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.25rem .4375rem .375rem; background: linear-gradient(to top, rgba(0, 0, 0, .74), rgba(0, 0, 0, 0)); color: #fff; display: flex; flex-direction: column; } .fall-tile .sh b { font-size: .8125rem; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fall-tile .sh b span { font-weight: 500; opacity: .85; margin-left: .25em; } .fall-tile .sh i { font-style: normal; font-size: .625rem; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fall-mark { position: absolute; top: .3125rem; right: .3125rem; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: rgba(0, 0, 0, .45); backdrop-filter: blur(6px); display: grid; place-items: center; font-size: .75rem; } .fall-note { padding: .75rem .75rem 0; text-align: center; } .fall-more { height: 1px; margin-bottom: calc(var(--tabbar-space) + .5rem); } .factions.fwrite-row { justify-content: center; padding: .625rem 1rem calc(.625rem + var(--safe-bottom)); } /* the premium pill: a deep pink-to-violet body with an inner highlight, a slow sheen, a gold price */ .btn.fwrite { position: relative; overflow: hidden; width: 100%; max-width: 24rem; height: 3.5rem; border-radius: 1.75rem; display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: .75rem; font-size: 1.0625rem; font-weight: 800; letter-spacing: .01em; color: #fff; background: linear-gradient(135deg, #ff5f8f 0%, #ff2d6f 45%, #b43cff 100%); box-shadow: 0 .625rem 1.5rem rgba(255, 45, 111, .38), inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -2px 0 rgba(0, 0, 0, .12); transition: transform .15s cubic-bezier(.34, 1.56, .64, 1), box-shadow .15s ease; } .btn.fwrite::after { content: ""; position: absolute; top: -40%; bottom: -40%; left: -30%; width: 35%; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .42) 50%, rgba(255, 255, 255, 0) 100%); transform: skewX(-20deg); animation: fwrite-sheen 3.2s ease-in-out infinite; pointer-events: none; } @keyframes fwrite-sheen { 0%, 55% { left: -40%; } 85%, 100% { left: 130%; } } .btn.fwrite:active { transform: scale(.97); box-shadow: 0 .25rem .75rem rgba(255, 45, 111, .35), inset 0 1px 0 rgba(255, 255, 255, .25); } .btn.fwrite em { font-style: normal; font-weight: 900; padding: .25rem .6875rem; border-radius: 1rem; background: linear-gradient(180deg, #ffe08a, #ffb800); color: #5a3a00; font-size: .9375rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 6px rgba(0, 0, 0, .18); } .btn.fwrite.busy { opacity: .6; pointer-events: none; } /* the bio on a card: four lines, «більше» on its own line under them, never past the card's edge (2026-10-18) */ .fcard .fbio { max-height: none; overflow: visible; display: block; } .fcard .fbio .fbio-t { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; } .fcard .fbio.open .fbio-t { display: block; -webkit-line-clamp: unset; max-height: 40vh; overflow: auto; } .fcard .fbio .more { display: inline-block; margin-top: .1875rem; } /* arrows on a card with several photos (2026-10-18): round glass chevrons at mid-height, over the tap zones */ .fcard .farrow { position: absolute; top: 50%; transform: translateY(-50%); width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(0, 0, 0, .38); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; display: grid; place-items: center; z-index: 3; box-shadow: 0 2px 8px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(255, 255, 255, .22); -webkit-tap-highlight-color: transparent; transition: transform .12s ease, background .12s ease; } .fcard .farrow.l { left: .625rem; } .fcard .farrow.r { right: .625rem; } .fcard .farrow:active { transform: translateY(-50%) scale(.9); background: rgba(0, 0, 0, .55); } .fcard.under .farrow { display: none; } .fcard.bio-open .farrow { display: none; } /* the open bio takes the card: no chevrons over the words (2026-10-18) */ /* «Написати · 50 ⭐» in the deck (2026-10-18): a smaller round button between the two, the same pink-violet as the premium pill */ .factions .write svg { width: 1.625rem; height: 1.625rem; stroke-width: 2.2; display: grid; place-items: center; padding: .9375rem; box-sizing: content-box; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #ff5f8f 0%, #ff2d6f 45%, #b43cff 100%); box-shadow: 0 .5rem 1.25rem rgba(255, 45, 111, .4), inset 0 1px 0 rgba(255, 255, 255, .35); transition: transform .15s cubic-bezier(.34, 1.56, .64, 1), box-shadow .15s ease; } .factions .write { margin-top: .5rem; } .factions .write { position: relative; } .factions .write span { white-space: nowrap; } .factions .write em { position: absolute; top: -.125rem; right: -.875rem; z-index: 2; font-style: normal; font-weight: 900; font-size: .6875rem; line-height: 1; padding: .25rem .4375rem; border-radius: .75rem; background: linear-gradient(180deg, #ffe08a, #ffb800); color: #5a3a00; box-shadow: 0 2px 6px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .6); white-space: nowrap; } .factions .write.busy { opacity: .6; pointer-events: none; } .factions .write:disabled { opacity: .6; } /* «Без черги» discount (2026-10-20): the old price struck through, dimmer, beside the new one */ .wq-prio .t b s, .wp-send s, .acard .pill.gold s { text-decoration: line-through; opacity: .6; font-weight: 500; margin-right: .0625rem; } /* Effects in packs by subscription (2026-10-22): the pack's banner on top of the shop, a lock on the cards, the gift options */ .fx-packs { flex: none; } .fx-pack { position: relative; display: flex; align-items: center; gap: .625rem; margin: 0 0 .625rem; padding: .625rem .75rem; border-radius: 1rem; overflow: hidden; color: #fff; background: linear-gradient(135deg, #2b303b, #1a1d24); box-shadow: inset 0 0 0 1.5px rgba(255, 207, 64, .6); } .fx-pack::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 12% 50%, rgba(255, 207, 64, .45), transparent 55%); pointer-events: none; } .fx-pack > * { position: relative; } .fx-pack .t { flex: 1; min-width: 0; } .fx-pack .t b { display: block; font-size: 1rem; font-weight: 800; line-height: 1.2; } .fx-pack .t span { display: block; font-size: .75rem; line-height: 1.3; color: rgba(255, 255, 255, .72); } .fx-pack .go { flex: none; display: inline-flex; align-items: center; gap: .375rem; height: 2.375rem; padding: 0 .75rem; border: 0; border-radius: 1.1875rem; background: linear-gradient(135deg, #ffcf40, #ff9f00); color: #3a2a00; font: inherit; font-size: .8125rem; font-weight: 800; cursor: pointer; box-shadow: 0 .25rem .75rem rgba(255, 159, 0, .35); } .fx-pack .go.busy { opacity: .6; pointer-events: none; } .fx-pack .price, .fx-item.v2 .btn.buy .price { display: inline-flex; align-items: center; gap: .125rem; padding: .125rem .4375rem; border-radius: .75rem; background: rgba(58, 42, 0, .14); font-weight: 800; } .fx-pack .price i, .fx-item.v2 .btn.buy .price i { font-style: normal; font-size: .6875rem; font-weight: 700; opacity: .8; margin-left: .125rem; } .fx-pack .price .star, .fx-item.v2 .btn.buy .price .star { width: .875rem; height: .875rem; } .fx-pack .on { flex: none; font-size: .8125rem; font-weight: 800; color: #6ee787; text-align: right; line-height: 1.2; } .fx-pack.active { box-shadow: inset 0 0 0 1.5px rgba(110, 231, 135, .6); } .fx-pack.active::before { background: radial-gradient(circle at 12% 50%, rgba(110, 231, 135, .35), transparent 55%); } .fx-card .lock { display: inline-flex; align-items: center; margin-top: .25rem; height: 1.375rem; padding: 0 .5rem; border-radius: .6875rem; font-size: .75rem; background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .8); } .fx-item.v2 .btn.buy .t2 { opacity: .8; font-weight: 700; } .fx-giftbox .gift-opts { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin: .5rem 0; } .fx-giftbox .gift-opts .lbl { width: 100%; font-size: .75rem; font-weight: 700; color: var(--hint, #8a8a8e); } .fx-giftbox .gift-opts button { height: 2.125rem; padding: 0 .875rem; border: 0; border-radius: 1.0625rem; background: rgba(127, 127, 127, .14); color: inherit; font: inherit; font-size: .8125rem; font-weight: 700; cursor: pointer; } .fx-giftbox .gift-opts button.on { background: #ffd54f; color: #3a2a00; } .fx-giftbox .gift-now { margin-top: .5rem; font-size: .8125rem; line-height: 1.35; color: var(--hint, #8a8a8e); } /* «Пак 2» clips (2026-10-22): a pre-rendered animated WebP over the table */ .fx-clip { position: fixed; z-index: 9992; pointer-events: none; will-change: transform, opacity; transform-origin: 50% 50%; } /* «Пак 2» (2026-10-22): what happens to the avatar in the new shows */ .fx-blown { animation: fxBlown .9s cubic-bezier(.2,.8,.3,1) !important; } @keyframes fxBlown { 0% { transform: none; } 18% { transform: translateY(-26px) rotate(-18deg) scale(1.12); } 45% { transform: translateY(10px) rotate(12deg) scale(.96); } 70% { transform: translateY(-4px) rotate(-4deg); } 100% { transform: none; } } .fx-punched { animation: fxPunched 1.2s cubic-bezier(.2,.8,.3,1) !important; } @keyframes fxPunched { 0% { transform: none; } 10% { transform: scale(.72, 1.25); } 25% { transform: translateX(22px) rotate(16deg) scale(1.1, .9); } 45% { transform: translateX(-8px) rotate(-6deg); } 65% { transform: translateX(4px) rotate(2deg); } 100% { transform: none; } } .fx-frozen { animation: fxShiver .14s linear 6; filter: sepia(1) hue-rotate(170deg) saturate(2.6) brightness(1.05); box-shadow: 0 0 0 .25rem #80d8ff, 0 0 1.25rem #40c4ff !important; transition: filter .3s; } .fx-slip { animation: fxSlip 1.6s cubic-bezier(.3,.7,.3,1) !important; } @keyframes fxSlip { 0% { transform: none; } 22% { transform: translateY(-16px) rotate(-28deg); } 55% { transform: translateY(20px) rotate(95deg) scale(.95); } 75% { transform: translateY(8px) rotate(85deg); } 100% { transform: none; } } .fx-wrapped { animation: fxShake .45s ease; filter: contrast(.55) brightness(1.5); box-shadow: 0 0 0 .3rem #fff, 0 0 0 .55rem rgba(255, 255, 255, .55) !important; } .fx-dead { filter: grayscale(1) brightness(.65); transform: rotate(-8deg); transition: filter .6s, transform .6s; } .fx-dart { position: fixed; z-index: 9992; pointer-events: none; width: 14px; height: 14px; border-radius: 50%; background: #212121; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #e53935, 0 .25rem .5rem rgba(0, 0, 0, .5); } .fx-dart::after { content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 26px; background: linear-gradient(#fff, #e53935); transform-origin: 50% 0; transform: translateX(-50%) rotate(200deg); border-radius: 2px; } .fx-thread { position: fixed; z-index: 9991; pointer-events: none; width: 2px; background: rgba(255, 255, 255, .8); transform: translateX(-50%); box-shadow: 0 0 .25rem rgba(255, 255, 255, .6); } .fx-lite .fx-frozen, .fx-lite .fx-wrapped, .fx-lite .fx-dead { filter: none; } /* the effects grid like Telegram's emoji picker (2026-10-22): living emoji on a plain grid, a name under each, four in a row */ .fx-shop .fx-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .125rem .25rem; } .fx-card.tg, .fx-shop .fx-card.tg { background: none; box-shadow: none; color: inherit; padding: .375rem .125rem .5rem; gap: .25rem; border-radius: .875rem; } .fx-card.tg::before, .fx-card.tg::after { content: none; animation: none; } .fx-card.tg.owned, .fx-shop .fx-card.tg.owned { box-shadow: none; } .fx-card.tg:active { background: rgba(127, 127, 127, .12); } .fx-card.tg .pic, .fx-shop .fx-card.tg .pic { position: relative; width: 3.75rem; height: 3.75rem; margin: 0; } .fx-card.tg .pic img { filter: none; transition: opacity .2s; } .fx-card.tg .pic.on img { opacity: 0; } .fx-card.tg .pic .fxlive { position: absolute; inset: 0; } .fx-card.tg .pic .fxlive canvas { display: block; width: 100% !important; height: 100% !important; } .fx-card.tg .nm, .fx-shop .fx-card.tg .nm { font-size: .6875rem; font-weight: 600; line-height: 1.15; text-align: center; white-space: normal; max-height: 2.3em; overflow: hidden; } .fx-giftbox .fx-card.tg.picked { box-shadow: 0 0 0 2.5px #ffd54f; transform: none; } /* the effects window like Telegram's sticker panel (2026-10-22): a slim pack line, five living emoji in a row, no names — the tap opens the card */ .fx-shop .fx-shop-head { margin-bottom: .5rem; } .fx-shop .fx-shop-head b { font-size: 1.0625rem; } .fx-pack, .fx-shop .fx-pack { margin: 0 0 .5rem; padding: .5rem .75rem; border-radius: .875rem; background: rgba(127, 127, 127, .1); color: inherit; box-shadow: none; } .fx-pack::before { content: none; } .fx-pack .t b { font-size: .9375rem; } .fx-pack .t span { color: var(--hint, #8a8a8e); font-size: .75rem; } .fx-pack .go { height: 2rem; padding: 0 .875rem; font-size: .8125rem; box-shadow: none; } .fx-pack.active { box-shadow: none; } .fx-shop .fx-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .125rem; padding: 0; } .fx-card.tg, .fx-shop .fx-card.tg { padding: .25rem .125rem; gap: 0; border-radius: .75rem; } .fx-card.tg .pic, .fx-shop .fx-card.tg .pic { width: 3.25rem; height: 3.25rem; } .fx-card.tg .nm, .fx-shop .fx-card.tg .nm { display: none; } .fx-shop .fx-fine { margin-top: .5rem; font-size: .625rem; } .fx-shop { height: min(34rem, calc(100vh - 9rem)); } /* «Недавні» / «Усі ефекти» rows in the grid; the buy button that fits (2026-10-22) */ .fx-grid .fx-sec { grid-column: 1 / -1; padding: .5rem .25rem .125rem; font-size: .6875rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--hint, #8a8a8e); } .fx-grid .fx-sec:first-child { padding-top: 0; } .fx-item.v2 .btn.buy { font-size: 1rem; gap: .5rem; padding: 0 .75rem; } .fx-item.v2 .btn.buy .t { flex: none; } .fx-item.v2 .btn.buy .price { flex: none; font-size: .9375rem; padding: .1875rem .5rem; } .fx-item.v2 .btn.buy .price i { font-size: .75rem; } .fx-pack .go { flex: none; } .fx-pack .t { min-width: 0; } .fx-pack .t b, .fx-pack .t span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fx-pack .t b { font-size: .875rem; } /* no layout shift while the emoji stills load (2026-10-22): fixed boxes, the image fits inside */ .fx-card.tg .pic, .fx-shop .fx-card.tg .pic { flex: none; aspect-ratio: 1; } .fx-card.tg .pic img { display: block; width: 100%; height: 100%; object-fit: contain; } .fx-card.tg, .fx-shop .fx-card.tg { height: 4rem; box-sizing: border-box; } .fx-shop .fx-grid { grid-auto-rows: auto; } /* the buy button: one plain line «Підключити за 49 ⭐ на місяць» (2026-10-22) */ .fx-item.v2 .btn.buy { gap: .3125rem; font-size: 1rem; font-weight: 800; } .fx-item.v2 .btn.buy .star { width: 1.125rem; height: 1.125rem; flex: none; } .fx-item.v2 .btn.buy .t2 { opacity: .9; font-weight: 700; } /* 2026-10-22 — the reply faces fill their column (the owner: «аватарки далеко от ника»): the wall card's 2rem !important rule had shrunk them inside the 3.25rem Threads column, leaving a gap before the name; nested replies keep their 2rem in a 2.75rem column */ :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row:not(.reply) .who .avatar, :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row:not(.reply) .avatar.small { width: var(--th-av) !important; height: var(--th-av) !important; flex: 0 0 var(--th-av) !important; min-width: 0; max-width: none; font-size: 1rem !important; } /* 2026-10-22 — pictures and effect stickers under records (the owner) */ .ask-cm-row .cm-pic { margin: .25rem 0 .125rem; } .ask-cm-row .cm-pic img { display: block; max-width: min(15rem, 100%); max-height: 18rem; border-radius: .875rem; object-fit: cover; background: var(--th-card, var(--color-background-secondary)); cursor: pointer; } .ask-cm-row .cm-fx { position: relative; width: 7.5rem; height: 7.5rem; margin: .25rem 0 .125rem; cursor: pointer; transition: transform .12s; } .ask-cm-row .cm-fx img { width: 100%; height: 100%; object-fit: contain; display: block; } .ask-cm-row .cm-fx .fxlive { position: absolute; inset: 0; } .ask-cm-row .cm-fx .fxlive canvas { width: 100% !important; height: 100% !important; display: block; } .ask-cm-row .cm-fx.on img { opacity: 0; } .ask-cm-row .cm-fx:active { transform: scale(.94); } .ask-cm-form .ask-cm-ic { flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; background: none; border: 0; color: var(--th-grey, var(--color-text-secondary)); font-size: 1.125rem; position: relative; overflow: hidden; padding: 0; margin: 0; } .ask-cm-form .ask-cm-ic svg { width: 1.375rem; height: 1.375rem; } .ask-cm-form .ask-cm-ic.fx { font-size: 1.25rem; } .ask-cm-att { display: flex; align-items: center; gap: .625rem; padding: .25rem 0; color: var(--th-grey, var(--color-text-secondary)); font-size: .8125rem; } .ask-cm-att .th { width: 3rem; height: 3rem; border-radius: .625rem; overflow: hidden; background: var(--th-card, var(--color-background-secondary)); flex: none; } .ask-cm-att .th img { width: 100%; height: 100%; object-fit: cover; display: block; } .ask-cm-att .th.fx img { object-fit: contain; } .ask-cm-att .x { margin-left: auto; width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; border: 0; padding: 0; background: var(--th-card, var(--color-background-secondary)); color: inherit; } .ask-cm-att .x svg { width: .875rem; height: .875rem; } /* 2026-10-22 — the comment field: the paperclip outside on the left, the purple ✨ inside on the right (the owner: «засунь в поле ввода справа») */ .ask-cm-form .ask-cm-field { flex: 1; min-width: 0; position: relative; display: flex; align-items: flex-end; } .ask-cm-form .ask-cm-field textarea { flex: 1; width: 100%; min-width: 0; box-sizing: border-box; padding-right: 3.125rem !important; } .ask-cm-form .ask-cm-fx { position: absolute; right: .25rem; bottom: .25rem; width: 2.375rem; height: 1.875rem; border-radius: 1rem; border: 0; padding: 0; margin: 0; display: grid; place-items: center; color: #fff; font-size: 1rem; line-height: 1; cursor: pointer; overflow: hidden; background: linear-gradient(180deg, #c084ff 0%, #8f4dff 50%, #6a2bd9 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -.125rem 0 rgba(40, 0, 90, .35), 0 .1875rem .5rem rgba(136, 71, 255, .45); } .ask-cm-form .ask-cm-fx:active { transform: translateY(1px) scale(.96); } .ask-cm-form .ask-cm-ic svg { width: 1.5rem; height: 1.5rem; } /* 2026-10-22 — stickers like Telegram's (the owner): bigger, sharp, nothing behind; the paperclip centred in its circle */ .ask-cm-row .cm-fx { width: 9.5rem; height: 9.5rem; margin: .375rem 0 .25rem; background: none; } .ask-cm-row .cm-fx img { transition: opacity .15s; } .ask-cm-row .cm-fx .fxlive canvas { image-rendering: auto; } .ask-cm-form .ask-cm-ic { width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center; flex: none; } .ask-cm-form .ask-cm-ic svg { width: 1.5rem; height: 1.5rem; display: block; } /* 2026-10-22 — the ✨ in the comment field: a small circle, centred on a one-line field (the owner: «некрасиво расположена») */ .ask-cm-form .ask-cm-field textarea { padding-right: 2.75rem !important; } .ask-cm-form .ask-cm-fx { width: 1.75rem; height: 1.75rem; border-radius: 50%; right: .3125rem; bottom: .25rem; font-size: .9375rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 .125rem .375rem rgba(136, 71, 255, .4); } /* 2026-10-22 — the field over my wall takes a picture or a sticker (the owner): the paperclip inside on the left, the purple ✨ before «send» */ .ask-compose .field .abtn { width: 2.5rem; min-height: 2.75rem; align-self: stretch; display: grid; place-items: center; flex: none; padding: 0; margin: 0 -.25rem 0 0; border: 0; background: none; color: rgba(255, 255, 255, .85); } .ask-compose .field .abtn svg { width: 1.5rem; height: 1.5rem; stroke-width: 1.8; } .ask-compose .field .fxin { flex: none; align-self: flex-end; width: 1.875rem; height: 1.875rem; margin: 0 .125rem .4375rem 0; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; font-size: 1rem; line-height: 1; color: #fff; background: linear-gradient(180deg, #c084ff 0%, #8f4dff 50%, #6a2bd9 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 .125rem .375rem rgba(136, 71, 255, .4); } .ask-compose .field .fxin:active { transform: translateY(1px) scale(.96); } .ask-compose .att { display: flex; align-items: center; gap: .625rem; margin: 0 .25rem .375rem; padding: .375rem .5rem; border-radius: 1rem; background: rgba(0, 0, 0, .34); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #fff; font-size: .8125rem; } .ask-compose .att .th { width: 2.75rem; height: 2.75rem; border-radius: .625rem; overflow: hidden; background: rgba(255, 255, 255, .12); flex: none; } .ask-compose .att .th img { width: 100%; height: 100%; object-fit: cover; display: block; } .ask-compose .att .th.fx img { object-fit: contain; } .ask-compose .att .x { margin-left: auto; width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; border: 0; padding: 0; background: rgba(255, 255, 255, .18); color: #fff; } .ask-compose .att .x svg { width: .875rem; height: .875rem; } /* the record's own picture and sticker (the same look as under comments) */ .ask-it .ab .cm-pic { margin: .375rem 0 .125rem; } .ask-it .ab .cm-pic img { display: block; max-width: min(17rem, 100%); max-height: 22rem; border-radius: .875rem; object-fit: cover; cursor: pointer; } .ask-it .ab .cm-fx { position: relative; width: 9.5rem; height: 9.5rem; margin: .375rem 0 .25rem; cursor: pointer; } .ask-it .ab .cm-fx img { width: 100%; height: 100%; object-fit: contain; display: block; transition: opacity .15s; } .ask-it .ab .cm-fx .fxlive { position: absolute; inset: 0; } .ask-it .ab .cm-fx .fxlive canvas { width: 100% !important; height: 100% !important; display: block; } .ask-it .ab .cm-fx.on img { opacity: 0; } :root[data-theme="light"] .ask-compose .field .abtn { color: rgba(0, 0, 0, .55); } /* the paperclip on the white pill of the light theme (2026-10-22) */ /* 2026-10-22 — stickers from a wall (the owner): the grid's cards move while on screen; the item card shows the sticker big, no table */ .fx-card.tg .pic { position: relative; } .fx-card.tg .pic .fxlive { position: absolute; inset: 0; } .fx-card.tg .pic .fxlive canvas { width: 100% !important; height: 100% !important; display: block; } .fx-card.tg .pic.on img { opacity: 0; } .fx-item.v2 .stage.sticker { display: grid; place-items: center; background: var(--color-background-secondary); box-shadow: inset 0 -.25rem 0 var(--rc); } .fx-item.v2 .stage.sticker .lot { position: static; width: 11rem; height: 11rem; transform: none; } /* 2026-10-22 — the pack row: where it works, as chips (the owner) */ .fx-pack .t .fx-where { display: flex; gap: .25rem; margin-top: .25rem; min-width: 0; overflow: hidden; } .fx-pack .t .fx-where i { font-style: normal; font-size: .6875rem; font-weight: 700; line-height: 1; padding: .25rem .4375rem; border-radius: .75rem; background: rgba(127, 127, 127, .16); color: inherit; white-space: nowrap; flex: none; } /* 2026-10-22 — the item card: the effect where it was opened from, chips to see it elsewhere (the owner) */ .fx-item.v2 .stage.sticker { display: block; place-items: unset; padding: .5rem 0 0; background: var(--color-background); } .fx-item.v2 .stage.sticker .fx-wrow { display: flex; align-items: flex-start; gap: .625rem; padding: .75rem .875rem; } .fx-item.v2 .stage.sticker .fx-wrow .avatar { width: 2.5rem; height: 2.5rem; flex: none; font-size: 1rem; } .fx-item.v2 .stage.sticker .fx-wrow .tx { min-width: 0; } .fx-item.v2 .stage.sticker .fx-wrow .tx b { display: block; font-size: .9375rem; font-weight: 600; margin: .25rem 0 .375rem; } .fx-item.v2 .stage.sticker .lot { position: static; width: 8.5rem; height: 8.5rem; margin: 0; transform: none; } .fx-item.v2 .fx-ctx { display: flex; gap: .375rem; padding: .625rem .875rem 0; } .fx-item.v2 .fx-ctx .c { flex: 1; height: 2rem; border: 0; border-radius: 1rem; padding: 0 .5rem; background: rgba(127, 127, 127, .14); color: inherit; font: inherit; font-size: .8125rem; font-weight: 700; white-space: nowrap; } .fx-item.v2 .fx-ctx .c.on { background: var(--color-primary); color: #fff; } .fx-item.v2 .fx-ctx .c { font-size: .75rem; padding: 0 .25rem; } /* «Дурак» fit (2026-10-22) */ /* 2026-10-22 — the item card from a wall: Durak's stage, the sticker alone; chips with icons (the owner's screenshot 19:39) */ .fx-item.v2 .stage.sticker { display: block; padding: 0; background: radial-gradient(120% 90% at 50% 20%, #2b2f3d, #111319 70%); } .fx-item.v2 .stage.sticker .lot { position: absolute; left: 50%; top: 50%; width: 9.5rem; height: 9.5rem; margin: 0; transform: translate(-50%, -50%); } .fx-item.v2 .fx-ctx { gap: .5rem; padding: .75rem .875rem 0; } .fx-item.v2 .fx-ctx .c { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; height: 2.5rem; padding: 0 .5rem; border-radius: 1.25rem; font-size: .875rem; font-weight: 700; background: rgba(127, 127, 127, .14); } .fx-item.v2 .fx-ctx .c svg { width: 1.25rem; height: 1.25rem; flex: none; } .fx-item.v2 .fx-ctx .c.on { background: var(--color-primary); color: #fff; } /* 2026-10-22 — the «Стіна» stage: the same lot box as Durak's, so a switch never rescales the canvas */ .fx-item.v2 .stage.sticker .lot { width: 8rem; height: 8rem; } /* 2026-10-22 — the «Стіна» preview in the item card: darker behind the sticker (the owner: «сзади более затемнение — в превью») */ .fx-item.v2 .stage.sticker { background: radial-gradient(120% 90% at 50% 25%, #1a1d26, #06070a 72%); } .fx-item.v2 .stage.sticker .glow { opacity: .45; } /* 2026-10-22 — the «Стіна» preview darker still: the rarity glow almost off (the owner: «затемнения не вижу») */ .fx-item.v2 .stage.sticker { background: radial-gradient(120% 90% at 50% 25%, #15171e, #050608 70%); } .fx-item.v2 .stage.sticker .glow { opacity: .18; } /* 2026-10-22 — the «Стіна» preview overlay: a show lot without the drop shadow, fading in */ .fx-lot.preview { filter: none; animation: fx-preview-in .25s ease-out both; } @keyframes fx-preview-in { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } } /* 2026-10-23 — iPhone: a sticker canvas inside the page was drawn every frame but never shown until a reload (the owner's log: drawn=570, run=true, still a frozen picture). The page-level .fx-lot (own compositing layer) is what his phone does show — so every sticker canvas gets its own layer too. */ .fx-card.tg .pic .fxlive canvas, .fx-item .stage .lot canvas { transform: translateZ(0); will-change: transform; backface-visibility: hidden; } /* not the stickers in records/comments (2026-10-23): forced layers starved the phone */ /* ---- the moderator's profile screen, compact (2026-10-23) ---- */ .adm-prof { padding-top: .5rem; } .adm-prof .acard { padding: .5625rem .6875rem; margin-bottom: .4375rem; } .adm-prof .acard .head { align-items: center; } .adm-prof .acard .meta { display: block; margin-top: .25rem; line-height: 1.35; } .adm-id .row { display: flex; align-items: center; gap: .625rem; } .adm-id .row .avatar { width: 2.75rem; height: 2.75rem; font-size: 1rem; flex: none; } .adm-id .t { min-width: 0; display: flex; flex-direction: column; gap: .125rem; } .adm-id .t b { font-size: .9375rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .adm-id .t span { font-size: .75rem; color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .adm-chips { display: flex; flex-wrap: wrap; gap: .3125rem; margin-top: .5rem; } .adm-chips .chip { font-size: .6875rem; font-weight: 600; padding: .1875rem .5rem; border-radius: 1rem; background: var(--color-background-secondary-accent); color: var(--color-text-secondary); } .adm-chips .chip.good { background: #34c75922; color: #1f9d48; } .adm-chips .chip.warn { background: #ff9f0a22; color: #c77700; } .adm-chips .chip.bad { background: #e5393520; color: var(--color-error); } .adm-actions { display: flex; flex-wrap: wrap; gap: .375rem; padding: 0 .75rem .4375rem; } .adm-actions.in { padding: .4375rem 0 0; } .adm-actions .pill { padding: .3125rem .625rem; border-radius: 1rem; font-weight: 600; font-size: .75rem; gap: .25rem; white-space: nowrap; } .adm-actions .pill svg { width: .875rem; height: .875rem; } .adm-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .3125rem; } .adm-stats > div { display: flex; flex-direction: column; min-width: 0; padding: .3125rem .4375rem; border-radius: .5rem; background: var(--color-background-secondary-accent); } .adm-stats b { font-size: .875rem; font-weight: 700; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .adm-stats span { font-size: .625rem; color: var(--color-text-secondary); line-height: 1.2; } .adm-stats i { font-style: normal; font-size: .5625rem; color: var(--color-text-secondary); opacity: .8; margin-top: .125rem; line-height: 1.2; } .adm-thumbs { display: flex; gap: .375rem; margin-top: .5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .adm-thumbs::-webkit-scrollbar { display: none; } .adm-thumbs img { width: 4rem; height: 5rem; object-fit: cover; border-radius: .5rem; flex: none; background: var(--color-background-secondary-accent); } .adm-bio { margin-top: .375rem; font-size: .8125rem; line-height: 1.35; white-space: pre-wrap; } .adm-bio.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .adm-visits .vis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } .adm-visits .vis.open { white-space: normal; } .adm-visits .vis i { display: block; font-style: normal; font-size: .625rem; opacity: .7; } .adm-visits .prev { margin-top: .25rem; } .adm-ban .meta { color: var(--color-text); } /* ---- «Скарги», compact (2026-10-23) ---- */ .acard.rep { padding: .5625rem .6875rem; } .acard.rep .head { font-size: .8125rem; } .rep-who { display: flex; align-items: baseline; gap: .375rem; margin-top: .3125rem; font-size: .8125rem; min-width: 0; border-radius: .375rem; } .rep-who .role { font-size: .6875rem; color: var(--color-text-secondary); flex: none; } .rep-who b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rep-who > span:last-child { font-size: .75rem; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rep-reason { margin-top: .375rem; font-size: .8125rem; line-height: 1.35; color: var(--color-text); white-space: pre-wrap; word-break: break-word; } .rep-hint { margin-top: .375rem; font-size: .75rem; line-height: 1.3; color: var(--color-error, #ff3b30); } .acard.rep .lines { margin-top: .4375rem; font-size: .8125rem; line-height: 1.35; padding-left: .5rem; } .acard.rep .lines .prev { margin: 0 0 .25rem; font-size: .75rem; } .acard.rep .lines > div { margin-top: .125rem; word-break: break-word; } .acard.rep .actions { margin-top: .5rem; gap: .3125rem; } .acard.rep .actions .pill { font-size: .75rem; padding: .3125rem .5625rem; } .acard.rep .lines.clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; } /* a long post folds to four lines, a tap unfolds (2026-10-23) */ /* ---- the action row under a reply, as in Threads on iOS (2026-10-23): heart · bubble · «Відповісти», one line, left, same icons as the record's ---- */ .ask-it.likeonly .ask-cm-row .foot { justify-content: flex-start !important; gap: .25rem !important; margin-top: .3125rem; } .ask-it.likeonly .ask-cm-row .foot .reacts { display: contents; } .ask-it .like.small { height: 1.75rem; font-size: .8125rem; gap: .3rem; padding: 0 .5rem 0 .25rem; } .ask-it .like.small svg { width: 1.25rem; height: 1.25rem; stroke-width: 1.7; } .ask-it .like.small.reply { color: var(--th-grey, #8a8f98); } .ask-it .like.small.reply svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; } .ask-it .like.small.reply .n { font-weight: 500; } /* ---- a comment just sent, and a linked one (2026-10-23): soft, rounded, no square ---- */ .ask-it .ask-cm-row.born { animation: cm-born 1.3s cubic-bezier(.2, .8, .2, 1) both; border-radius: .875rem; } @keyframes cm-born { 0% { opacity: 0; transform: translateY(.875rem) scale(.98); background: rgba(51, 144, 236, 0); box-shadow: 0 0 0 .5rem rgba(51, 144, 236, 0); } 28% { opacity: 1; transform: none; background: rgba(51, 144, 236, .16); box-shadow: 0 0 0 .5rem rgba(51, 144, 236, .16); } 55% { background: rgba(51, 144, 236, .12); box-shadow: 0 0 0 .5rem rgba(51, 144, 236, .12); } 100% { background: rgba(51, 144, 236, 0); box-shadow: 0 0 0 .5rem rgba(51, 144, 236, 0); } } .ask-it .ask-cm-row.born > .who .avatar, .ask-it .ask-cm-row.born > .avatar { animation: cm-born-face .8s cubic-bezier(.2, .9, .3, 1.4) both; } @keyframes cm-born-face { 0% { transform: scale(.55); opacity: 0; } 55% { transform: scale(1.1); opacity: 1; } 100% { transform: none; } } .ask-it .ask-cm-row.lit { animation: cm-glow 1.6s ease-out !important; border-radius: .875rem !important; background: transparent !important; } @keyframes cm-glow { 0% { background: rgba(51, 144, 236, .18); box-shadow: 0 0 0 .5rem rgba(51, 144, 236, .18); } 30% { background: rgba(51, 144, 236, .14); box-shadow: 0 0 0 .5rem rgba(51, 144, 236, .14); } 100% { background: rgba(51, 144, 236, 0); box-shadow: 0 0 0 .5rem rgba(51, 144, 236, 0); } } /* the halo is a layer under the row, rounded on its own; the row only rises in (the box-shadow kept square corners on the phone, 2026-10-23) */ .ask-it .ask-cm-row.born, .ask-it .ask-cm-row.lit { position: relative; box-shadow: none !important; background: transparent !important; border-radius: 0 !important; overflow: visible !important; animation: none !important; } .ask-it .ask-cm-row > i.halo { position: absolute; left: -.5rem; right: -.5rem; top: -.3125rem; bottom: -.3125rem; border-radius: 1.125rem; background: rgba(51, 144, 236, .15); pointer-events: none; z-index: 0 !important; animation: cm-halo 1.4s ease-out both; } /* a real child: ::before and ::after are the branch lines */ .ask-it .ask-cm-row.born > *, .ask-it .ask-cm-row.lit > * { position: relative; z-index: 1; } .ask-it .ask-cm-row.born { animation: cm-rise .75s cubic-bezier(.2, .8, .2, 1) both !important; } @keyframes cm-rise { 0% { opacity: 0; transform: translateY(.875rem) scale(.98); } 100% { opacity: 1; transform: none; } } @keyframes cm-halo { 0% { opacity: 0; transform: scale(.97); } 22% { opacity: 1; transform: none; } 60% { opacity: .9; } 100% { opacity: 0; } } /* ---- a reply's first line like the record's (2026-10-23, the owner): name · time, the words right under, nothing pushed to the far right ---- */ :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row .hd { display: flex !important; align-items: baseline !important; justify-content: flex-start !important; gap: .3125rem !important; margin: 0 0 .0625rem !important; min-height: 0 !important; line-height: 1.25; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row .hd time.ago { margin-left: 0 !important; flex: none; font-size: .8125rem; color: var(--th-grey); } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row .hd time.ago::before { content: "· "; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row .hd .who b { font-size: .9375rem; font-weight: 600; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row .tx .t { display: block; margin-top: 0; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row .tx { min-height: 0; } /* ---- the head while the wall loads looks exactly like the loaded one (2026-10-23, the owner: «имя и кнопка скачут») ---- */ .layer.th .ask-top.loading { --fold: 0px !important; transform: none !important; padding: .5rem .875rem .5rem; } .layer.th .ask-top.loading .head { gap: .625rem; padding-right: 5.5rem; } .layer.th .ask-top.loading .avatar.hero { width: 2.75rem; height: 2.75rem; font-size: 1.125rem; box-shadow: 0 0 0 .125rem rgba(255, 255, 255, .8), 0 .25rem .75rem rgba(0, 0, 0, .3); } .layer.th .ask-top.loading .t b { font-size: 1rem; } .layer.th .ask-top.loading .t .sub { font-size: .75rem; } .layer.th .ask-top.loading .t .ask-views { margin-top: .25rem; transform: scale(.9); transform-origin: left center; } .layer.th .ask-top.loading .line { margin-top: .25rem; font-size: .8125rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; } .layer.th .ask-top.loading .ask-tiles { margin-top: .375rem; gap: .375rem; } .layer.th .ask-top.loading .ask-tiles .tile { min-height: 2rem; padding: .25rem .5rem; font-size: .75rem; } .layer.th .ask-top.loading > .ask-rate.corner.corner { top: .375rem; right: .625rem; transform: scale(.9); transform-origin: right top; } .layer.th .ask-top.loading .line-more { display: none; } .ask-top .ask-follow.ph { opacity: .55; pointer-events: none; } /* ---- a reply's first line (2026-10-23): the name and the time share one baseline, no tall button around the name ---- */ :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row .hd { align-items: center !important; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row .hd .who { display: inline-flex !important; align-items: center; height: auto !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; line-height: 1.25; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row .hd .who b { line-height: 1.25; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row .hd time.ago { line-height: 1.25; align-self: center; } :is(.wall-chat .wask.onfeed, .th-page .wask.onfeed, .onth) .ask-fcard .ask-it .ask-cm-row .tx .t { margin-top: .125rem; } .layer.th .ask-top.toprow.loading { padding: .25rem .5rem .5rem .875rem; } /* the loading head keeps the one-row padding: the last 4px of the jump (2026-10-23) */ /* ---- the capsule «Стрічка · Моя стіна · Запитання», lower and even (2026-10-23, the owner) ---- */ .ask-bseg .ask-tabs, .ask-bseg .seg.ask-tabs { height: 2.5rem !important; min-height: 2.5rem !important; padding: .1875rem !important; border-radius: 1.25rem !important; } .ask-bseg .ask-tabs button, .ask-bseg .seg.ask-tabs button { flex: 1 1 0 !important; min-width: 0; font-size: .8125rem !important; font-weight: 600 !important; padding: 0 .25rem !important; border-radius: 1.0625rem !important; display: inline-flex; align-items: center; justify-content: center; gap: .25rem; } .ask-bseg .ask-tabs button .n, .ask-bseg .seg.ask-tabs button .n { font-size: .625rem; height: 1rem; min-width: 1rem; line-height: 1rem; padding: 0 .25rem; border-radius: .5rem; } /* ---- the capsule a little closer to the footer, the own-wall field right above it (2026-10-23, the owner) ---- */ .ask-bseg { bottom: calc(var(--tabbar-space) + .375rem) !important; } .wall-chat.asking.onwall.mine .ask-compose { bottom: calc(var(--tabbar-space) + 3.25rem); } body.keyboard-visible .wall-chat.asking.onwall.mine .ask-compose { bottom: .75rem; } .ask-bseg { bottom: calc(var(--tabbar-space) + .125rem) !important; } /* closer still to the footer (2026-10-23, the owner: «чутка ближе») */ .wall-chat.asking.onwall.mine .ask-compose { bottom: calc(var(--tabbar-space) + 2.75rem); } /* the field right above the capsule */ /* «Моя стіна» without the footer (body.ownwall): the field right above the 2.5rem capsule, not above the hidden footer's height (2026-10-23, the owner) */ body.ownwall .wall-chat.asking.onwall.mine .ask-compose { bottom: calc(var(--safe-bottom) + var(--tabbar-gap) + 2.5rem + .375rem); } body.ownwall.keyboard-visible .wall-chat.asking.onwall.mine .ask-compose { bottom: .75rem; } .ask-fcard.rise { animation: cm-rise .5s cubic-bezier(.2, .8, .2, 1) both; } /* a record that arrived on refresh (2026-10-23) */ body.ownwall .wall-chat.asking.onwall.mine .ask-compose { bottom: calc(var(--safe-bottom) + var(--tabbar-gap) + 2.5rem + .875rem); } /* a little more air above the capsule (2026-10-23, the owner: «очень близко») */ /* (2026-10-23, the owner) with the footer in sight (Стрічка, Запитання) the capsule keeps more air above the footer; on the own wall, footer hidden, it sits lower */ .ask-bseg { bottom: calc(var(--tabbar-space) + .5rem) !important; } body.ownwall .wall-chat.asking .ask-bseg { bottom: calc(var(--safe-bottom) + .25rem) !important; } body.ownwall .wall-chat.asking.onwall.mine .ask-compose { bottom: calc(var(--safe-bottom) + .25rem + 2.5rem + .875rem); } body.ownwall.keyboard-visible .wall-chat.asking.onwall.mine .ask-compose { bottom: .75rem; } body.ownwall .wall-chat.asking .ask-bseg { bottom: calc(var(--safe-bottom) + .0625rem) !important; } /* lower still on the own wall (2026-10-23, the owner) */ body.ownwall .wall-chat.asking.onwall.mine .ask-compose { bottom: calc(var(--safe-bottom) + .0625rem + 2.5rem + .875rem); } body.ownwall.keyboard-visible .wall-chat.asking.onwall.mine .ask-compose { bottom: .75rem; } /* lower than the safe area on the own wall (2026-10-23, the owner: «ещё меньше»): into the home-indicator strip, never under the very edge */ body.ownwall .wall-chat.asking .ask-bseg { bottom: max(.25rem, calc(var(--safe-bottom) - .875rem)) !important; } body.ownwall .wall-chat.asking.onwall.mine .ask-compose { bottom: calc(max(.25rem, calc(var(--safe-bottom) - .875rem)) + 2.5rem + .875rem); } body.ownwall.keyboard-visible .wall-chat.asking.onwall.mine .ask-compose { bottom: .75rem; } /* (2026-10-23, the owner: «верни обратно и правильно подвинь поле ввода») the own-wall capsule back where it was; only the field moves — closer to the capsule */ body.ownwall .wall-chat.asking .ask-bseg { bottom: calc(var(--safe-bottom) + var(--tabbar-gap)) !important; } body.ownwall .wall-chat.asking.onwall.mine .ask-compose { bottom: calc(var(--safe-bottom) + var(--tabbar-gap) + 2.5rem + .5rem); } body.ownwall.keyboard-visible .wall-chat.asking.onwall.mine .ask-compose { bottom: .75rem; } /* chats (2026-10-23, the owner): a little more air between bubbles, a little less above the field */ .msg { margin-bottom: .375rem; } .msg.last-in-group { margin-bottom: 1rem; } .msgs > .mcol { padding-bottom: calc(var(--composer-reserve) + .125rem); } body.keyboard-visible .msgs > .mcol { padding-bottom: calc(var(--composer-height) + 1rem); } /* pull-to-refresh hint on the walls section (2026-10-23) */ .ptr-hint { position: fixed; left: 50%; top: calc(var(--safe-top, 0px) + 3.75rem); transform: translateX(-50%); z-index: 60; padding: .375rem .875rem; border-radius: 1rem; font-size: .8125rem; font-weight: 600; color: var(--color-text); background: color-mix(in srgb, var(--color-tabbar) 85%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .18); pointer-events: none; transition: opacity .15s; } .ptr-hint.ready { color: var(--color-primary); } /* the walls section while a manual refresh swaps its rows (2026-10-23): a soft veil, not a flash */ #wall-ask { transition: opacity .22s ease, filter .22s ease; } #wall-ask.refreshing { opacity: .35; filter: blur(3px); pointer-events: none; } /* the old list, melting away over the new one (2026-10-23) */ .ask-ghost-old { opacity: 1; transition: opacity .38s ease; background: var(--color-background, #000); } .ask-ghost-old.out { opacity: 0; } #wall-ask { transition: none; } #wall-ask.refreshing { opacity: 1; filter: none; pointer-events: auto; } /* pull-to-refresh on the walls section (2026-10-23): the list follows the finger, a round spinner grows in above it */ .ptr-spin { position: absolute; left: 50%; top: calc(var(--safe-top, 0px) + 3.25rem); z-index: 7; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; color: var(--color-primary); background: var(--color-background, #fff); box-shadow: 0 .25rem .875rem rgba(0, 0, 0, .18); opacity: 0; transform: translate(-50%, 0) scale(.6); pointer-events: none; } .ptr-spin svg { width: 1.25rem; height: 1.25rem; transform: rotate(-90deg); } .ptr-spin.ready { color: var(--color-primary); box-shadow: 0 .25rem 1rem rgba(51, 144, 236, .35); } .ptr-spin.spinning svg { animation: ptr-turn .8s linear infinite; } @keyframes ptr-turn { to { transform: rotate(270deg); } } .ptr-hint { display: none !important; } .ptr-spin { position: fixed !important; z-index: 1200 !important; top: calc(var(--safe-top, 0px) + 3.5rem); } /* above everything (2026-10-23, the owner) */