/* ══════════════════════════════════════════════════════════════════════════ Sky-тема цієї сторінки: теми з /themes переписують глобальні CSS-змінні інлайном на , і все, що нижче посилається на var(--transparent) / var(--block-bg) / var(--search-shadow), фарбувалось у напівпрозорий колір теми — виглядало як стара скляна тема 2000-х поряд з білими .colc-картками решти сайту. Скоуп нижче прибиває на сторінці ті самі константи, якими живе редизайн (#fff-картки, бордер #eef0f8, фіолетова тінь), і робить її незалежною від активної теми. .effect-card-menu у списку окремо, бо JS телепортує це меню в document.body — поза .mycollection-wrapper. ══════════════════════════════════════════════════════════════════════════ */ .mycollection-wrapper, .extension-not-installed, .effect-card-menu { --transparent: #eef0f8; --block-bg: #ffffff; --background-1: #ffffff; --color-text: #33384d; --text-link-color: #1f2547; --search-shadow: 0 4px 14px var(--mc-shadow-sm); --slider-bg: linear-gradient(90deg, #cfc4fb, #9b8cf9, #6d55e6); --thumb-color: radial-gradient(circle, #ffffff 40%, #e7e2fb 70%); --gradient-line: linear-gradient(90deg, #9b8cf9, #6d55e6); /* Семантичні токени сторінки. Світлі значення — рівно ті константи, що раніше стояли літералами по всьому файлу, тож світла тема рендериться піксель-у-піксель. Темні — у дзеркальному блоці нижче. */ --mc-surface: #ffffff; /* картка / панель / спливне меню */ --mc-surface-2: #f6f3ff; /* піднятий і активний стан пункта */ --mc-surface-sunken: #fafbff; /* врізані зони: прев'ю, рядки-тумблери */ --mc-border: #eef0f8; /* рамка картки */ --mc-border-soft: #f0f2fa; /* рамка врізаної зони */ --mc-border-hover: #e3dffb; /* рамка врізаної зони на ховері */ --mc-border-accent: #cfc4fb; /* рамка картки/тригера на ховері */ --mc-border-active: #9b8cf9; /* рамка активного/сфокусованого */ --mc-ink: #1f2547; /* заголовки й посилання (найконтрастніше) */ --mc-ink-2: #33384d; /* основний текст і лейбли */ --mc-accent: #6d55e6; /* фіолетовий акцент (гліфи іконок) */ --mc-accent-2: #cfc4fb; /* декоративна лаванда (крапки-«іскри») */ --mc-accent-soft: #f1edfd; /* підкладка іконок-чіпів і бейджів */ --mc-shadow: rgba(140, 120, 230, 0.12); /* тінь картки */ --mc-shadow-sm: rgba(140, 120, 230, 0.10); /* --search-shadow */ --mc-shadow-md: rgba(140, 120, 230, 0.14); /* ховер рядка / пункта */ --mc-shadow-lift: rgba(140, 120, 230, 0.16); /* ховер тригера й тумблера */ --mc-shadow-lg: rgba(140, 120, 230, 0.22); /* спливні меню */ --mc-focus-ring: rgba(155, 140, 249, 0.18); /* кільце фокуса інпутів */ } /* ══════════════════════════════════════════════════════════════════════════ Темна тема — дзеркало пін-блока вище: ті самі три скоупи, ті самі імена, значення з чат-палітри сайту (див. html[data-chat-mode="dark"] у app.css): поверхні #1b2434 / #232c40 / #26304a, рамка #2c3950, чорнило #eceaf7 / #d7d9e8, акцент #b9a9f5, тіні на чорному замість фіолетових. Далі — кілька явних правил для того, що токеном не виражається: градієнти, SVG-data-URI стрілка селекта і кольори .mc-top, які живуть в app.css (він вантажиться ПІСЛЯ цього файлу, тож потрібна вища специфічність, а не той самий селектор). ══════════════════════════════════════════════════════════════════════════ */ html[data-chat-mode="dark"] .mycollection-wrapper, html[data-chat-mode="dark"] .extension-not-installed, html[data-chat-mode="dark"] .effect-card-menu { --transparent: #2c3950; --block-bg: #232c40; --background-1: #232c40; --color-text: #d7d9e8; --text-link-color: #eceaf7; --search-shadow: 0 4px 14px var(--mc-shadow-sm); --slider-bg: linear-gradient(90deg, #3a3568, #6d55e6, #b9a9f5); --thumb-color: radial-gradient(circle, #eceaf7 40%, #b9a9f5 70%); --gradient-line: linear-gradient(90deg, #6d55e6, #b9a9f5); --mc-surface: #232c40; --mc-surface-2: #26304a; --mc-surface-sunken: #1b2434; --mc-border: #2c3950; --mc-border-soft: #2c3950; --mc-border-hover: #3b4568; --mc-border-accent: #4b4577; --mc-border-active: #b9a9f5; --mc-ink: #eceaf7; --mc-ink-2: #d7d9e8; --mc-accent: #b9a9f5; --mc-accent-2: #b9a9f5; --mc-accent-soft: rgba(140, 120, 230, 0.16); --mc-shadow: rgba(0, 0, 0, 0.35); --mc-shadow-sm: rgba(0, 0, 0, 0.30); --mc-shadow-md: rgba(0, 0, 0, 0.38); --mc-shadow-lift: rgba(0, 0, 0, 0.42); --mc-shadow-lg: rgba(0, 0, 0, 0.50); --mc-focus-ring: rgba(185, 169, 245, 0.30); } /* Optional reward sits before the saved cursor grid, in normal document flow. */ .mycollection .collection-reward { position: relative; display: grid; grid-template-columns: 176px minmax(0, 1fr) auto; grid-template-areas: "art copy actions"; align-items: center; gap: 24px; width: 100%; margin: 24px 0; padding: 24px 48px 24px 24px; border: 2px solid var(--mc-border-accent); border-radius: 24px; background: radial-gradient(ellipse at 8% 50%, var(--mc-accent-soft), transparent 65%), linear-gradient(115deg, var(--mc-surface-2), var(--mc-surface)); box-shadow: 0 10px 28px var(--mc-shadow-sm); color: var(--mc-ink); text-align: left; } .collection-reward__art { grid-area: art; display: block; width: 176px; height: 176px; object-fit: contain; pointer-events: none; user-select: none; } .collection-reward__copy { grid-area: copy; min-width: 0; } .collection-reward__eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: var(--mc-accent); font-size: 13px; font-weight: 800; } .mycollection .collection-reward__copy h2 { margin: 0; color: var(--mc-ink); font-size: 24px; font-weight: 800; line-height: 1.25; } .mycollection .collection-reward__copy p { max-width: 480px; margin: 10px 0 0; color: var(--mc-ink-2); font-size: 14px; line-height: 1.5; } .collection-reward__actions { grid-area: actions; display: grid; justify-items: center; gap: 8px; } .mycollection .collection-reward__button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 12px 24px; border: 1px solid #b7a0ff66; border-radius: 99px; background: linear-gradient(105deg, #9361ed, #655dea); color: #fff; font-size: 15px; font-weight: 800; line-height: 1.4; text-decoration: none; white-space: nowrap; box-shadow: 0 6px 18px #7454ca33; } .mycollection .collection-reward__button:hover { color: #fff; filter: brightness(1.1); } .collection-reward__actions small { color: var(--mc-ink-2); opacity: .75; font-size: 11px; } .mycollection .collection-reward__dismiss { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--mc-ink-2); cursor: pointer; } .mycollection .collection-reward__dismiss:hover { background: var(--mc-accent-soft); } .collection-reward__button:focus-visible, .collection-reward__dismiss:focus-visible { outline: 2px solid var(--mc-accent); outline-offset: 3px; } .mycollection .collection-reward[hidden], .collection-reward [hidden] { display: none !important; } @media (min-width: 769px) and (max-width: 1100px) { .mycollection .collection-reward { grid-template-columns: 160px minmax(0, 1fr); grid-template-areas: "art copy" "art actions"; column-gap: 24px; row-gap: 16px; padding: 24px 44px 24px 20px; } .collection-reward__art { width: 160px; height: 160px; } .mycollection .collection-reward__copy h2 { font-size: 22px; } .collection-reward__actions { justify-self: start; } } /* This is a desktop extension reward, matching the former homepage eligibility. */ @media (max-width: 768px) { .mycollection .collection-reward { display: none !important; } } /* ── .mc-top: кольори цих блоків оголошені в app.css, який вантажиться після mycollection.css, тож перекрити їх можна лише вищою специфічністю ── */ html[data-chat-mode="dark"] .my-collection-header { background: var(--mc-surface); border-color: var(--mc-border); box-shadow: 0 8px 22px var(--mc-shadow); } html[data-chat-mode="dark"] .active-cursor { background: var(--mc-surface-sunken); border-color: var(--mc-border-soft); } html[data-chat-mode="dark"] .active-cursor:hover { border-color: var(--mc-border-hover); } html[data-chat-mode="dark"] .my-collection-switcher .content { background: var(--mc-surface-sunken); border-color: var(--mc-border-soft); } html[data-chat-mode="dark"] .my-collection-switcher .content:hover { border-color: var(--mc-border-hover); box-shadow: 0 6px 16px var(--mc-shadow-md); } html[data-chat-mode="dark"] .switcher-label { color: var(--mc-ink-2); } /* Вимкнений трек тумблера — світла лаванда #e9e6f7 світилась плямою на темному рядку; увімкнений лишається фірмовим фіолетовим градієнтом. */ html[data-chat-mode="dark"] .my-collection-switcher .ui-toggle-slider { background: #3b4568; } html[data-chat-mode="dark"] .params { background: var(--mc-surface); border-color: var(--mc-border); box-shadow: 0 8px 22px var(--mc-shadow); } html[data-chat-mode="dark"] .slider-container { background: var(--mc-surface-sunken); border-color: var(--mc-border-soft); } /* .value-display тримається display:none (app.css), колір — про запас, щоб при вмиканні підпис не лишився чорним на темному. */ html[data-chat-mode="dark"] .value-display { color: var(--mc-ink-2); } html[data-chat-mode="dark"] .slider-container h2, html[data-chat-mode="dark"] .effects-container-wrapper h2 { color: var(--mc-ink); } /* ── явні випадки: градієнт і data-URI токеном не описати ── */ html[data-chat-mode="dark"] .category-line { background: linear-gradient(to right, #3b4568, rgba(59, 69, 104, 0)); } /* Стрілка селекта — SVG-data-URI із fill="black"; на темному потрібен світлий гліф, тому весь background-шорткат переоголошено. */ html[data-chat-mode="dark"] .material-select { background: var(--mc-surface) url('data:image/svg+xml;charset=UTF-8,') no-repeat right 8px center; background-size: 16px; } .left, .right { -webkit-flex: 1; /* Safari */ -ms-flex: 1; /* IE */ flex: 1; display: -webkit-box; /* Safari */ display: -webkit-flex; /* Safari */ display: -ms-flexbox; /* IE */ display: flex; -webkit-align-items: center; /* Safari */ -ms-flex-align: center; /* IE */ align-items: center; -webkit-justify-content: center; /* Safari */ -ms-flex-pack: center; /* IE */ justify-content: center; max-width: 200px; width:200px; } #customcursor:checked + .switcher-label::after { color: black; } @media (max-width: 770px) { .my-collection-header { -webkit-flex-wrap: wrap !important; /* Safari */ -ms-flex-wrap: wrap !important; /* IE */ flex-wrap: wrap !important; -webkit-justify-content: center !important; /* Safari */ -ms-flex-pack: center !important; /* IE */ justify-content: center !important; } .my-collection-switcher { padding-left: 10px; } } @-webkit-keyframes movingGradient { /* Safari */ 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @-moz-keyframes movingGradient { /* Firefox */ 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes movingGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .content .switcher-label { /* Замість :has() */ width: 100% !important; } #slider1 { cursor: pointer; } .switcher-label-new { -webkit-justify-content: space-between !important; /* Safari */ -ms-flex-pack: justify !important; /* IE */ justify-content: space-between !important; } /* Підпис перемикача — звичайний лейбл зліва, без напівпрозорого піла: рядок сам є карткою, піл усередині картки читався як подвійна рамка. */ .switcher-label { width: 100%; display: flex; align-items: center; justify-content: flex-start; padding: 6px 0; background: transparent; border-radius: 8px; font-size: 13.5px; font-weight: 700; letter-spacing: 0.03em; color: var(--mc-ink-2); position: relative; text-transform: uppercase; } /* .switcher-label::after { content: "💠"; position: absolute; right: 2px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font-size: 16px; color: rgba(0, 0, 0, 0.2); top: 17px; } */ .switcher-switch { width: 125px; height: 50px; display: -webkit-box; /* Safari */ display: -webkit-flex; /* Safari */ display: -ms-flexbox; /* IE */ display: flex; -webkit-align-content: center; /* Safari */ -ms-flex-line-pack: center; /* IE */ align-content: center; -webkit-justify-content: center; /* Safari */ -ms-flex-pack: center; /* IE */ justify-content: center; -webkit-align-items: center; /* Safari */ -ms-flex-align: center; /* IE */ align-items: center; } /* Компактне прев'ю: розмір задають самі картинки (96px), а не жорсткі 320x175 — блок хедера був удвічі вищий, ніж треба. */ .currentcursorbox { position: relative; width: auto; height: auto; display: flex; align-items: center; padding: 10px 14px; border-radius: 7px; margin: 0; justify-content: center; } .currentcursorbox::before { position: absolute; top: -10px; left: 10px; background: var(--mc-surface-sunken); padding: 0 10px; font-size: 14px; -webkit-border-radius: 6px; /* Safari */ -moz-border-radius: 6px; /* Firefox */ border-radius: 6px; color: var(--mc-ink-2); } .currentcursorbox #nopointer-preview { border-left: 1px solid var(--mc-border); padding-left: 10px; } .currentcursorbox #nocursor-preview { padding-right: 10px; } /* The two preview slots hold black line-art placeholders until a cursor is picked — nearly invisible on the dark surface. Matching on the placeholder file name keeps real cursors (same , src swapped by the extension) untouched. */ html[data-chat-mode="dark"] .currentcursorbox #nocursor-preview[src*="nocursor"], html[data-chat-mode="dark"] .currentcursorbox #nopointer-preview[src*="nopointer"] { filter: invert(1) hue-rotate(180deg); opacity: 0.85; } .effects-container-wrapper { width: 100%; margin-bottom: 25px; padding: 20px; -webkit-border-radius: 22px; /* Safari */ -moz-border-radius: 22px; /* Firefox */ border-radius: 22px; background-color: var(--mc-surface); border: 1px solid var(--mc-border); -webkit-box-shadow: 0 8px 22px var(--mc-shadow); /* Safari */ -moz-box-shadow: 0 8px 22px var(--mc-shadow); /* Firefox */ box-shadow: 0 8px 22px var(--mc-shadow); } .switcher-off { pointer-events: none; -webkit-filter: grayscale(1); /* Safari */ -moz-filter: grayscale(1); /* Firefox */ -ms-filter: grayscale(1); /* IE */ filter: grayscale(1); } .my-collection-header { background-color: var(--mc-surface); border: 1px solid var(--mc-border); min-height: 100px; display: -webkit-box; /* Safari */ display: -webkit-flex; /* Safari */ display: -ms-flexbox; /* IE */ display: flex; -webkit-flex-direction: row; /* Safari */ -ms-flex-direction: row; /* IE */ flex-direction: row; margin-bottom: 20px; -webkit-border-radius: 22px; /* Safari */ -moz-border-radius: 22px; /* Firefox */ border-radius: 22px; -webkit-flex-wrap: nowrap; /* Safari */ -ms-flex-wrap: nowrap; /* IE */ flex-wrap: nowrap; -webkit-justify-content: space-between; /* Safari */ -ms-flex-pack: justify; /* IE */ justify-content: space-between; -webkit-box-shadow: 0 8px 22px var(--mc-shadow); /* Safari */ -moz-box-shadow: 0 8px 22px var(--mc-shadow); /* Firefox */ box-shadow: 0 8px 22px var(--mc-shadow); } /* Ширина = ширина .main-container (1000px) — та сама капсула, що й меню. Раніше порожні .left/.right (по 200px) стискали центр до ~600px. nowrap принципово: у wrapped-колонці align-items:stretch не тягне дітей на всю ширину лінії, і блоки всихались під власний контент. */ .mycollection { width: 100%; max-width: 100%; flex-direction: column; display: flex; flex-wrap: nowrap; position: relative; } .mycollection #mycursors { box-shadow: 0 8px 22px rgba(140, 120, 230, 0.12); } /* Рядок «лейбл + тумблер»: компактний рядок-панель у мові .colc-preview. flex: none — інакше рядки розтягувались (flex-grow) під висоту сусіднього прев'ю і блок роздувався вдвічі. */ .mycollection .content { width: 100% !important; border-radius: 12px; flex: none; display: flex; background: var(--mc-surface-sunken); border: 1px solid var(--mc-border-soft); /* без max-width: колонка перемикачів ширша за 1000px, і рядки обрізались, лишаючи білу дірку праворуч */ max-width: none; flex-direction: row; justify-content: space-between; align-items: center; gap: 14px; height: auto; min-height: 46px; padding: 4px 8px 4px 16px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .mycollection .content:hover { border-color: var(--mc-border-hover); box-shadow: 0 6px 16px var(--mc-shadow-md); } .mycollection #mycursors { flex-direction: column !important; width: 100%; border-radius: 22px; flex: 2; display: flex; background: #fff; border: 1px solid #eef0f8; max-width: 1000px; height: 100px; padding-bottom: 20px; } .mycollection .title { display: flex; align-items: center; font-size: 20px; font-weight: 800; color: #1f2547; padding: 30px 10px 10px 20px; line-height: unset; } .mycollection .title span { -webkit-flex: 1; /* Safari */ -ms-flex: 1; /* IE */ flex: 1; height: 1px; margin-left: 10px; margin-top: 4px; } .mycollection .line { flex: 1; height: 2px; border-radius: 999px; margin-left: 12px; background: linear-gradient(to right, #e3dffb, rgba(227, 223, 251, 0)); } .mycollection .cursor-list { width: 100%; display: -webkit-box; /* Safari */ display: -webkit-flex; /* Safari */ display: -ms-flexbox; /* IE */ display: flex; -webkit-flex-wrap: wrap; /* Safari */ -ms-flex-wrap: wrap; /* IE */ flex-wrap: wrap; padding: 0px 20px; } .mycollection .cursor-item { background-color: #fafbff; border: 1px solid #f0f2fa; padding: 8px 10px 10px 10px; border-radius: 16px; margin: 5px; text-align: center; margin-bottom: 7px; width: calc(25% - 10px); height: 207px; position: relative; transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease; } .mycollection .remove-btn { display: none; outline: none !important; border: 1px solid #eef0f8; background: #fff; border-radius: 12px; box-shadow: 0 4px 10px rgba(140, 120, 230, 0.18); padding: 4px; top: 8px; position: absolute; left: calc(100% - 42px); opacity: 1; width: 34px; cursor: pointer; } .mycollection .main__item { background-color: #fafbff; border: 1px solid #f0f2fa; padding: 8px 10px 10px 10px; border-radius: 16px; margin: 4px; text-align: center; margin-bottom: 7px; width: -webkit-calc(25% - 10px); /* Safari */ width: -moz-calc(25% - 10px); /* Firefox */ width: 145px; height: 145px; position: relative; -webkit-justify-content: center; /* Safari */ -ms-flex-pack: center; /* IE */ justify-content: center; -webkit-align-items: center; /* Safari */ -ms-flex-align: center; /* IE */ align-items: center; display: -webkit-box; /* Safari */ display: -webkit-flex; /* Safari */ display: -ms-flexbox; /* IE */ display: flex; } .mycollection .main__item:hover .remove-btn { display: block; } .mycollection .main__item:hover, .mycollection .cursor-item:hover { background-color: #fff; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(140, 120, 230, 0.22); } .mycollection .main__item-img { cursor: pointer; height: inherit; display: -webkit-box; /* Safari */ display: -webkit-flex; /* Safari */ display: -ms-flexbox; /* IE */ display: flex; -webkit-box-pack: justify; /* Safari */ -webkit-justify-content: space-around; /* Safari */ -ms-flex-pack: justify; /* IE */ justify-content: space-around; padding: 25px; margin-bottom: 0px; } .mycollection-wrapper { /* Прихована, доки main.js не визначить стан розширення (poll на data-cursor-style) — інакше кожен відвідувач на мить бачить повний "встановлено"-інтерфейс перед блиманням у "не встановлено". */ display: none; -webkit-flex-direction: row; /* Safari */ -ms-flex-direction: row; /* IE */ flex-direction: row; margin-top: 30px; justify-content: center; } .google-sides{ position: relative; height: 100%; width: 100%; } [data-message-id="undefined"] { display: none !important; } .google-sides .googleads{ position: sticky; top: 0; left: 0; } .cursor-settings { display: -ms-grid; /* IE */ display: grid; -ms-grid-columns: auto auto; /* IE */ grid-template-columns: auto auto; gap: 10px; -webkit-align-items: center; /* Safari */ -ms-flex-align: center; /* IE */ align-items: center; width: -webkit-max-content; /* Safari */ width: -moz-max-content; /* Firefox */ width: max-content; } .cursor-option { display: -webkit-box; /* Safari */ display: -webkit-flex; /* Safari */ display: -ms-flexbox; /* IE */ display: flex; -webkit-align-items: center; /* Safari */ -ms-flex-align: center; /* IE */ align-items: center; gap: 10px; } emoji-picker { display: none; position: absolute; z-index: 999; } .material-table { width: 100%; border-collapse: separate; border-spacing: 0 12px; } .material-label-cell { padding: 8px 16px 8px 0; vertical-align: middle; color: var(--color-text); font-size: 14px; font-weight: 500; } .material-input-cell { padding: 8px 0; } .child-container { display: -webkit-box; /* Safari */ display: -webkit-flex; /* Safari */ display: -ms-flexbox; /* IE */ display: flex; -webkit-flex-direction: column; /* Safari */ -ms-flex-direction: column; /* IE */ flex-direction: column; gap: 12px; } .child-label { min-width: 80px; color: var(--color-text); font-size: 14px; font-weight: 500; } .material-input-wrapper { position: relative; width: 100%; text-wrap: nowrap; -webkit-justify-content: center; /* Safari */ -ms-flex-pack: center; /* IE */ justify-content: center; -webkit-align-items: center; /* Safari */ -ms-flex-align: center; /* IE */ align-items: center; display: -webkit-box; /* Safari */ display: -webkit-flex; /* Safari */ display: -ms-flexbox; /* IE */ display: flex; } .material-input { width: 100%; padding: 10px; border: 1px solid var(--transparent); -webkit-border-radius: 8px; /* Safari */ -moz-border-radius: 8px; /* Firefox */ border-radius: 8px; font-size: 14px; -webkit-transition: border-color 0.3s; /* Safari */ -moz-transition: border-color 0.3s; /* Firefox */ transition: border-color 0.3s; } .material-input:focus { outline: none; border-color: var(--color-bg-via); -webkit-box-shadow: 0 0 0 5px var(--transparent); /* Safari */ -moz-box-shadow: 0 0 0 5px var(--transparent); /* Firefox */ box-shadow: 0 0 0 5px var(--transparent); } .material-select-wrapper { position: relative; width: 100%; } .material-select { width: 100%; padding: 8px 32px 8px 8px; font-size: 16px; border: 1px solid var(--transparent); -webkit-border-radius: 4px; /* Safari */ -moz-border-radius: 4px; /* Firefox */ border-radius: 4px; background: var(--mc-surface) url('data:image/svg+xml;charset=UTF-8,') no-repeat right 8px center; background-size: 16px; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; color: var(--color-text); } .material-select:focus { outline: none; border-color: var(--color-bg-via); -webkit-box-shadow: 0 0 0 5px var(--transparent); /* Safari */ -moz-box-shadow: 0 0 0 5px var(--transparent); /* Firefox */ box-shadow: 0 0 0 5px var(--transparent); } .material-input[type="range"] { width: -webkit-calc(100% - 40px); /* Safari */ width: -moz-calc(100% - 40px); /* Firefox */ width: calc(100% - 40px); margin: 0; height: 8px; -webkit-border-radius: 4px; /* Safari */ -moz-border-radius: 4px; /* Firefox */ border-radius: 4px; background: var(--slider-bg); outline: none; -webkit-appearance: none; } .material-input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; -webkit-border-radius: 50%; /* Safari */ -moz-border-radius: 50%; /* Firefox */ border-radius: 50%; background: var(--thumb-color); cursor: pointer; } .material-input[type="range"]::-moz-range-thumb { /* Firefox */ width: 16px; height: 16px; -moz-border-radius: 50%; border-radius: 50%; background: var(--thumb-color); cursor: pointer; border: none; } .material-range-value { margin-left: 8px; color: var(--color-text); font-size: 14px; min-width: 30px; text-align: right; } .color-picker { height: 40px; background: none; } .effect-selector-container { padding: 20px; } .category-divider { padding: 10px 0; white-space: nowrap; } .category-label { display: inline; font-weight: bold; margin-right: 10px; } .category-line { display: inline-block; width: calc(100% - 120px); border: none; height: 2px; border-radius: 999px; background: linear-gradient(to right, #e3dffb, rgba(227, 223, 251, 0)); margin: 0; vertical-align: middle; } /* Замість :has() для td */ td [data-nested-data] { width: 85%; } .line-effect { position: relative; overflow: hidden; z-index: 0; } /* Веселковий біжучий шлейф прибрано: RGB-градієнт з блюром випадав із пастельної мови редизайну — лейбл CURSOR TRAIL тепер такий самий, як у сусідніх перемикачів. */ .line-effect::before { content: none; } @-webkit-keyframes line-move { /* Safari */ 0% { left: -100%; opacity: 0; } 5% { opacity: 0.7; } 20% { left: 100%; opacity: 0.4; } 100% { left: 100%; opacity: 0; } } @-moz-keyframes line-move { /* Firefox */ 0% { left: -100%; opacity: 0; } 5% { opacity: 0.7; } 20% { left: 100%; opacity: 0.4; } 100% { left: 100%; opacity: 0; } } @keyframes line-move { 0% { left: -100%; opacity: 0; } 5% { opacity: 0.7; } 20% { left: 100%; opacity: 0.4; } 100% { left: 100%; opacity: 0; } } details { border-bottom: 1px solid var(--transparent); padding: 10px 0; font-family: sans-serif; color: var(--color-text); position: relative; margin: 0px 20px 0px 20px; } summary { display: flex !important; justify-content: flex-start; align-items: left; cursor: pointer; font-size: 16px; } summary span { flex-grow: 1; /* текст займає весь простір */ } summary::-webkit-details-marker { display: none; } summary::after { /* content: "👈"; */ font-size: 23px; color: var(--color-text); transition: transform 0.2s ease; font-weight: 100; } details[open] summary::after { /* content: "👇"; */ } details > *:not(summary) { margin-top: 10px; font-size: 15px; color: var(--color-text); } .emoji-container{ width: 100%; } .effects-container-wrapper { position: relative; overflow: visible; z-index: 12; border: 1px solid var(--mc-border); border-radius: 22px; padding: 20px; background: var(--mc-surface); box-shadow: 0 8px 22px var(--mc-shadow); } .effects-container-wrapper.selector-open { /* z-index removed — menu now uses position:fixed to escape stacking context */ } .effects-container-wrapper > h2 { margin: 0 0 18px; font-size: 18px; font-weight: 700; } .effects-container { position: relative; display: flex; flex-direction: column; gap: 18px; overflow: visible; } .default_cursor_cs { margin: 0; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; } .effect-aux-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .effects-container.effects-off-panel { align-items: center; justify-content: center; gap: 14px; padding: 16px; text-align: center; } .effects-off-panel__badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--transparent); color: var(--color-text); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .effects-off-panel__badge .material-icons-round { font-size: 16px; opacity: 0.6; } .effects-off-panel__hint { margin: 0; max-width: 32ch; color: var(--color-text); font-size: 14px; line-height: 1.5; opacity: 0.55; } .effects-off-panel__sparks { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 4px; } .effects-off-panel__spark { border-radius: 999px; background: var(--transparent); opacity: 0.45; } .effects-off-panel__spark:nth-child(1) { width: 10px; height: 10px; } .effects-off-panel__spark:nth-child(2) { width: 14px; height: 14px; } .effects-off-panel__spark:nth-child(3) { width: 9px; height: 9px; } .effect-selector-container { padding: 0; position: relative; flex: 1; min-width: 0; } .effect-selector-native { position: absolute; inset: 0; opacity: 0; pointer-events: none; } .effect-selector-trigger { width: 100%; padding: 14px 16px; border: 1px solid var(--transparent); border-radius: 16px; background: var(--mc-surface); color: var(--color-text); display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; appearance: none !important; box-shadow: inset 0 0 0 1px var(--transparent); } .effect-selector-trigger:hover, .effect-selector-shell.open .effect-selector-trigger { transform: translateY(-1px); border-color: var(--transparent); box-shadow: inset 0 0 0 1px var(--transparent), 0 10px 22px var(--mc-shadow-lift); } .effect-toolbar { position: relative; z-index: 8; display: flex; align-items: stretch; gap: 12px; } .effect-trigger-main { min-width: 0; display: flex; align-items: center; gap: 12px; } .effect-trigger-icon, .effect-card-option-icon { width: 44px; min-width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: var(--color-text); background: var(--transparent); } .effect-trigger-copy, .effect-card-option-copy { min-width: 0; text-align: left; } .effect-trigger-name, .effect-card-option-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; } .effect-trigger-chevron { transition: transform 0.2s ease; } .effect-selector-shell.open .effect-trigger-chevron { transform: rotate(180deg); } .effect-card-menu { position: absolute; /* top/left/width set dynamically by JS — menu is teleported to document.body */ z-index: 2147483647; visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s; padding: 14px; border: 1px solid var(--transparent); border-radius: 18px; background: var(--mc-surface); box-shadow: 0 18px 38px var(--mc-shadow-lg); } .effect-card-menu.effect-card-menu--open { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0s; } .effect-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; max-height: 320px; overflow: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: var(--transparent) transparent; } .effect-card-grid::-webkit-scrollbar { width: 10px; } .effect-card-grid::-webkit-scrollbar-track { background: transparent; } .effect-card-grid::-webkit-scrollbar-thumb { background: var(--transparent); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } .effect-card-grid::-webkit-scrollbar-thumb:hover { background: var(--transparent); background-clip: padding-box; } .effect-card-option { width: 100%; padding: 12px; border: 1px solid var(--transparent); border-radius: 14px; background: var(--mc-surface); display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer; transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; appearance: none !important; } .effect-card-option:hover, .effect-card-option.is-active { transform: translateY(-1px); border-color: var(--transparent); box-shadow: inset 0 0 0 1px var(--transparent), 0 10px 20px var(--mc-shadow-md); } .effect-settings-toggle { flex: 0 0 auto; min-height: 58px; padding: 0 16px; border: 1px solid var(--transparent); border-radius: 16px; background: var(--mc-surface); color: var(--color-text); display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; font-weight: 600; transition: box-shadow 0.2s ease, transform 0.2s ease; appearance: none !important; box-shadow: inset 0 0 0 1px var(--transparent); } .effect-settings-toggle:hover, .effect-settings-toggle.is-open { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--transparent), 0 10px 22px var(--mc-shadow-lift); } .effect-settings-panel { position: relative; z-index: 2; } .effect-settings-panel[hidden] { display: none !important; } .material-form { padding: 18px; border: 1px solid var(--transparent); border-radius: 18px; background: var(--mc-surface); } .material-select-wrapper { position: relative; } .settings-select-shell { position: relative; } .settings-select-native { position: absolute; inset: 0; opacity: 0; pointer-events: none; } .settings-select-trigger { width: 100%; min-height: 46px; padding: 12px 14px; border: 1px solid var(--transparent); border-radius: 14px; background: var(--mc-surface); color: var(--color-text); display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; cursor: pointer; appearance: none !important; box-shadow: inset 0 0 0 1px var(--transparent); transition: box-shadow 0.2s ease, transform 0.2s ease; } .settings-select-trigger:hover, .settings-select-shell.open .settings-select-trigger { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--transparent), 0 10px 22px var(--mc-shadow-md); } .settings-select-trigger-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; } .settings-select-trigger-icon { flex: 0 0 auto; transition: transform 0.2s ease; } .settings-select-shell.open .settings-select-trigger-icon { transform: rotate(180deg); } .settings-select-menu { position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: 35; display: none; max-height: 260px; overflow: auto; padding: 8px; border: 1px solid var(--transparent); border-radius: 16px; background: var(--mc-surface); box-shadow: 0 16px 34px var(--mc-shadow-lg); scrollbar-width: thin; scrollbar-color: var(--transparent) transparent; } .settings-select-shell.open .settings-select-menu { display: flex; flex-direction: column; gap: 6px; animation: effect-selector-in 0.16s ease; } .settings-select-menu::-webkit-scrollbar { width: 10px; } .settings-select-menu::-webkit-scrollbar-track { background: transparent; } .settings-select-menu::-webkit-scrollbar-thumb { background: var(--transparent); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } .settings-select-option { width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--color-text); text-align: left; cursor: pointer; font-size: 14px; font-weight: 500; transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; appearance: none !important; } .settings-select-option:hover, .settings-select-option.is-active { transform: translateY(-1px); background: color-mix(in srgb, var(--mc-surface) 72%, var(--transparent)); box-shadow: inset 0 0 0 1px var(--transparent); } .grouped-options { margin-top: 18px; padding: 18px; border: 1px solid var(--transparent); border-radius: 16px; background: color-mix(in srgb, var(--mc-surface) 88%, transparent); } .material-table { border-spacing: 0 14px; } .material-label-cell { width: 38%; padding-right: 16px; font-weight: 600; } .category-divider { padding: 8px 0 2px; } .category-label { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.72; } .gradient-line { width: 100%; height: 1px; margin-top: 8px; background: linear-gradient(90deg, var(--transparent), transparent); } .material-input, .material-select { min-height: 46px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--transparent) !important; background-color: var(--mc-surface) !important; color: var(--color-text) !important; box-shadow: inset 0 0 0 1px var(--transparent); } .material-input:focus, .material-select:focus { border-color: var(--transparent) !important; box-shadow: inset 0 0 0 1px var(--transparent), 0 0 0 4px var(--mc-focus-ring) !important; } .material-input[type="range"] { width: calc(100% - 52px); } .material-range-value { min-width: 36px; font-weight: 700; } .child-container { gap: 14px; padding: 14px; border: 1px dashed var(--transparent); border-radius: 14px; background: color-mix(in srgb, var(--mc-surface) 90%, transparent); } .mycollection #mycursors { position: relative; z-index: 1; } @keyframes effect-selector-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 760px) { .effect-toolbar { flex-direction: column; } .effect-settings-toggle { width: 100%; justify-content: center; } .effect-card-grid { grid-template-columns: 1fr; } .material-label-cell, .material-input-cell, .material-table tr, .material-table td { display: block; width: 100%; } .material-label-cell { padding: 0 0 8px; } } /* ══════════════════════════════════════════════════════════════════════════ Sky-акценти поверх усього вище: активні/фокусні стани у фірмовому фіолетовому (#9b8cf9→#6d55e6) замість нейтрально-сірого. ══════════════════════════════════════════════════════════════════════════ */ .material-input:focus, .material-select:focus { border-color: var(--mc-border-active) !important; box-shadow: inset 0 0 0 1px var(--mc-border-accent), 0 0 0 4px var(--mc-focus-ring) !important; } .effect-trigger-icon, .effect-card-option-icon { background: var(--mc-accent-soft); color: var(--mc-accent); } .effect-card-option.is-active { border-color: var(--mc-border-active); background: var(--mc-surface-2); } .effect-card-option:hover { border-color: var(--mc-border-accent); } .settings-select-option:hover, .settings-select-option.is-active { background: var(--mc-surface-2); box-shadow: inset 0 0 0 1px var(--mc-border-hover); } .effect-selector-trigger:hover, .effect-selector-shell.open .effect-selector-trigger, .effect-settings-toggle:hover, .effect-settings-toggle.is-open { border-color: var(--mc-border-accent); } .mycollection .main__item { transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease; } /* Порожні станові плитки/лейбли, що читали темозалежний прозорий фон */ .effects-off-panel__badge { background: var(--mc-accent-soft); color: var(--mc-accent); } .effects-off-panel__spark { background: var(--mc-accent-2); } /* ══ Chat invitation on /mycollection (partials/mycollection-chat-promo) ═══ Deliberately small: people come here for their collection. The whole card is one link. Left: real online count, title, button. Right: a FIXED-height chat window that plays fictional scenes (js/chat-promo-player.js, prefix "mcp") - fixed so new lines never grow the card and shift the page. */ .mcp { --mcp-h: 176px; position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: 24px; width: 100%; height: var(--mcp-h); margin: 0 0 18px; padding: 0 0 0 26px; border: 1px solid #e6ddff; border-radius: 22px; background: radial-gradient(ellipse at 20% 60%, #d9ccff66, transparent 45%), radial-gradient(ellipse at 82% 20%, #bfe3ff55, transparent 40%), linear-gradient(110deg, #ffffff, #f7f3ff 62%, #eef4ff); box-shadow: 0 12px 30px #4a3aa01a, 0 0 0 1px #d9ccff55, inset 0 1px 0 #ffffff; color: var(--mc-ink, #1f2547); font-family: 'Promo Nunito', Nunito, sans-serif; text-align: left; text-decoration: none; cursor: pointer; transition: box-shadow .2s, transform .2s; } .mcp:hover { color: var(--mc-ink, #1f2547); text-decoration: none; box-shadow: 0 16px 36px #4a3aa02b, 0 0 0 1px #cfc4fb, inset 0 1px 0 #ffffff; } .mcp:focus-visible { outline: 3px solid #addefe; outline-offset: 3px; } .mcp *, .mcp *::before, .mcp *::after { box-sizing: border-box; } .mcp__copy { position: relative; z-index: 2; flex: 0 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; } .mcp__live { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 4px 12px 4px 9px; border-radius: 999px; background: #e9f9ef; color: #1d7a45; font-size: 12.5px; font-weight: 800; } .mcp__live::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 0 3px #2ecc7133; animation: mcpPulse 1.8s ease-in-out infinite; } .mcp__title { margin: 0; color: #2a2560; font: 1000 27px/1.1 'Promo Nunito', Nunito, sans-serif; letter-spacing: -.025em; text-wrap: balance; text-shadow: 0 2px 0 #ffffff; } .mcp__title span { background: linear-gradient(100deg, #f04ae5 7%, #b983f5 54%, #42c9f7 95%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; } .mcp__btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 9px 18px 9px 13px; border-radius: 14px; color: #fff; background: linear-gradient(92deg, #7c5cff, #b36bff); font: 900 16px/1 'Promo Nunito', Nunito, sans-serif; box-shadow: 0 8px 20px #7c5cff44, inset 0 2px 3px #dfbdff4d; transition: transform .2s, box-shadow .2s; } .mcp__btn::before { content: ''; position: absolute; z-index: 0; inset: -50% auto; left: 0; width: 30%; background: linear-gradient(90deg, transparent, #ffffff59, transparent); transform: translateX(-120%) skewX(-20deg); animation: mcpShine 3.2s ease-in-out infinite; pointer-events: none; } .mcp__btn > * { position: relative; z-index: 1; } .mcp:hover .mcp__btn { transform: translateY(-2px); box-shadow: 0 12px 26px #7c5cff5c, inset 0 2px 3px #dfbdff4d; } .mcp:hover .mcp__btn-arrow { transform: translateX(3px); } .mcp__btn-icon { flex: none; width: 22px; height: 22px; color: #f6edff; } .mcp__btn-arrow { flex: none; width: 10px; height: 14px; transition: transform .2s; } /* the illustrated app window: fixed box, lines scroll inside it */ .mcp__scene { position: relative; z-index: 1; flex: 0 0 48%; margin-left: auto; /* stays right even when the online block is hidden */ align-self: stretch; padding: 16px 34px 16px 84px; pointer-events: none; } .mcp__window { position: relative; z-index: 2; display: flex; flex-direction: column; height: 100%; padding: 8px 10px 10px; border: 3px solid #cfc3ff; border-radius: 16px; background: linear-gradient(126deg, #1c2c47, #152236); box-shadow: inset 0 0 0 3px #222f53, 0 1px 0 1px #ffffff, 0 0 18px #a58cff44, 0 10px 20px #4a3aa02e; color: #f0f2ff; overflow: hidden; } .mcp__bar { flex: none; display: flex; align-items: center; gap: 5px; height: 18px; margin: -2px -3px 8px; padding: 0 5px 6px; border-bottom: 3px solid #314365; } .mcp__bar i { width: 7px; height: 7px; border-radius: 50%; background: #756cad; } .mcp__bar i:nth-child(2) { background: #506b99; } .mcp__bar i:nth-child(3) { background: #485075; } .mcp__bar b { margin-left: 6px; color: #8ea3cf; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; } .mcp__conversation { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; } .mcp__stream { display: grid; gap: 7px; transition: transform .42s cubic-bezier(.22, .8, .3, 1); } .mcp__message { display: flex; align-items: center; gap: 8px; } .mcp__message > img { flex: none; width: 26px; height: 26px; border: 1px solid #93c0fd70; border-radius: 50%; background: linear-gradient(135deg, #a17bf1, #475588); } .mcp__message span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; padding: 6px 10px; border-radius: 9px 9px 9px 2px; background: linear-gradient(120deg, #284e7f, #2f5b94); color: #f0f2ff; font-size: 12px; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 2px 6px #0a132a55; } .mcp__message.is-new { animation: mcpPop .38s cubic-bezier(.22, .8, .3, 1) both; } .mcp__message span.is-said { animation: mcpSaid .28s cubic-bezier(.22, .8, .3, 1); } .mcp__emoji { flex: none; width: 14px; height: 14px; } .mcp__typing { display: inline-flex; align-items: center; gap: 4px; padding: 2px; } .mcp__typing b { width: 5px; height: 5px; border-radius: 50%; background: #c9d8ff; animation: mcpDot .9s infinite ease-in-out; } .mcp__typing b:nth-child(2) { animation-delay: .15s; } .mcp__typing b:nth-child(3) { animation-delay: .3s; } .mcp__toast { position: absolute; z-index: 5; right: 20px; bottom: 8px; display: inline-flex; align-items: center; gap: 6px; max-width: 80%; padding: 4px 12px 4px 4px; border: 2px solid #ffffffcc; border-radius: 99em; background: linear-gradient(120deg, #ffffff, #f3edff); color: #2a2560; font-size: 11.5px; font-weight: 800; white-space: nowrap; box-shadow: 0 6px 18px #2a1f6a33; opacity: 0; transform: translateY(70%) scale(.92); transition: transform .5s cubic-bezier(.22, .8, .3, 1), opacity .4s; } .mcp__toast.is-in { opacity: 1; transform: translateY(0) scale(1); } .mcp__toast.is-out { opacity: 0; transform: translateY(-45%) scale(.96); transition: transform 1.7s ease-in, opacity 1.5s ease-in; } .mcp__toast > img:first-child { width: 24px; height: 24px; border: 2px solid #ffffff; border-radius: 50%; } .mcp__toast::before { content: ''; order: 1; width: 7px; height: 7px; margin: 16px 0 0 -11px; border-radius: 50%; background: #3ed47a; box-shadow: 0 0 0 2px #ffffff; } .mcp__toast > span { order: 2; } .mcp__toast .mcp__emoji { order: 3; } .mcp__mascot { position: absolute; z-index: 3; left: 0; bottom: 6px; width: auto; height: 100px; transform: rotate(-12deg); filter: drop-shadow(0 6px 10px #5360ee33); } .mcp__deco { position: absolute; z-index: 3; right: 2px; top: -4px; width: 78px; height: auto; } @keyframes mcpPop { from { opacity: 0; transform: translateY(45%) scale(.9); } } @keyframes mcpSaid { from { transform: scale(.94); } } @keyframes mcpDot { 0%, 80%, 100% { transform: translateY(0); opacity: .45; } 40% { transform: translateY(-3px); opacity: 1; } } @keyframes mcpPulse { 0%, 100% { box-shadow: 0 0 0 3px #2ecc7133; } 50% { box-shadow: 0 0 0 6px #2ecc7122; } } @keyframes mcpShine { from { transform: translateX(-120%) skewX(-20deg); } 55%, to { transform: translateX(450%) skewX(-20deg); } } /* middle: the real online count + three perks, centred in the free space between the button and the window; the perks keep it full when the count is hidden (fewer than 5 online, e.g. at night in El Salvador) */ .mcp__mid { position: relative; z-index: 2; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 40px; padding: 0 8px; } .mcp__desc { max-width: 34ch; margin: -2px 0 2px; color: #4b5580; font-size: 13.5px; font-weight: 700; line-height: 1.35; } .mcp__perks { display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; list-style: none; min-width: 0; } .mcp__perk { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 5px 12px 5px 5px; border: 1px solid #ebe4ff; border-radius: 13px; background: #ffffffc2; box-shadow: 0 3px 10px #4a3aa012; } .mcp__perk-ico { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, #e3f8ee, #d2f1e4); } .mcp__perk--friends .mcp__perk-ico { background: linear-gradient(135deg, #e3efff, #d3e4ff); } .mcp__perk--play .mcp__perk-ico { background: linear-gradient(135deg, #efe6ff, #e3d6ff); } .mcp__perk-ico img { width: 26px; height: 26px; object-fit: contain; } .mcp__perk-text { display: flex; flex-direction: column; min-width: 0; } .mcp__perk-text strong { color: #2a2560; font-size: 12.5px; font-weight: 900; line-height: 1.2; white-space: nowrap; } .mcp__perk-text small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-width: 220px; overflow: hidden; color: #6b7394; font-size: 11px; font-weight: 700; line-height: 1.25; } /* not enough room for the one-line explanations: titles only, no cut-off text */ @media (max-width: 1599px) { .mcp__perk-text small { display: none; } .mcp__perk { padding-right: 16px; } } /* between tablet and wide desktop there is room for the count only */ @media (max-width: 1399px) { .mcp__perks { display: none; } } @media (max-width: 1399px) and (min-width: 1081px) { .mcp__online[hidden] + .mcp__perks { display: flex; } .mcp__online[hidden] + .mcp__perks .mcp__perk-text small { display: none; } } /* the real online count, big, in the middle (wide screens) */ .mcp [hidden] { display: none !important; } .mcp__online { position: relative; z-index: 2; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 6px; text-align: center; } .mcp__online-dot { position: relative; display: grid; place-items: center; width: 18px; height: 18px; } .mcp__online-dot i { width: 10px; height: 10px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 10px #2ecc71aa; } .mcp__online-dot::before, .mcp__online-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #2ecc71; opacity: 0; animation: mcpRing 2.4s ease-out infinite; } .mcp__online-dot::after { animation-delay: 1.2s; } .mcp__online-line { margin: 0; max-width: 260px; color: #4b5580; font-size: 14px; font-weight: 800; line-height: 1.25; } .mcp__num { display: block; margin: 2px 0; font: 1000 44px/1 'Promo Nunito', Nunito, sans-serif; letter-spacing: -.02em; font-variant-numeric: tabular-nums; background: linear-gradient(100deg, #16a34a, #2ecc71 45%, #22b5d6); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 0 #ffffff); } .mcp__delta { position: absolute; top: 20px; left: calc(50% + 58px); padding: 2px 8px; border-radius: 999px; background: #e9f9ef; color: #16a34a; font-size: 13px; font-weight: 900; opacity: 0; pointer-events: none; } .mcp__delta.is-down { background: #f1edff; color: #6d55e6; } .mcp__delta.is-on { animation: mcpDelta 2.2s ease-out forwards; } @keyframes mcpRing { from { transform: scale(.6); opacity: .8; } to { transform: scale(2.2); opacity: 0; } } @keyframes mcpDelta { 0% { opacity: 0; transform: translateY(8px); } 15% { opacity: 1; transform: translateY(0); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-16px); } } /* on wide screens the centre shows the count, so the small pill steps aside */ @media (min-width: 1081px) { .mcp__live { display: none !important; } } @media (max-width: 1080px) { .mcp__mid { display: none !important; } .mcp__copy { flex: 1 1 auto; } } /* dark page */ html[data-chat-mode="dark"] .mcp { border-color: #2c3950; background: radial-gradient(ellipse at 28% 57%, #473f9133, transparent 40%), radial-gradient(ellipse at 77% 79%, #56409d38, transparent 36%), linear-gradient(110deg, #232c40, #1c2438 66%, #262244); box-shadow: 0 12px 30px #0000004d, 0 0 0 1px #7161ba22, inset 0 1px 0 #d3c8ff0d; color: #eceaf7; } html[data-chat-mode="dark"] .mcp:hover { color: #eceaf7; } html[data-chat-mode="dark"] .mcp__title { color: #ffffff; text-shadow: 0 3px 0 #8685be33; } html[data-chat-mode="dark"] .mcp__live { background: #1d3a2c; color: #7ee2a8; } html[data-chat-mode="dark"] .mcp__online-line { color: #bac3e7; } html[data-chat-mode="dark"] .mcp__desc { color: #bac3e7; } html[data-chat-mode="dark"] .mcp__perk { background: #2f3a55; border-color: #3a4766; box-shadow: none; } html[data-chat-mode="dark"] .mcp__perk-text strong { color: #eef0f8; } html[data-chat-mode="dark"] .mcp__perk-text small { color: #aab2cf; } html[data-chat-mode="dark"] .mcp__num { filter: none; } html[data-chat-mode="dark"] .mcp__delta { background: #1d3a2c; color: #7ee2a8; } html[data-chat-mode="dark"] .mcp__delta.is-down { background: #2f3a55; color: #cfc4ff; } html[data-chat-mode="dark"] .mcp__window { border-color: #4b4a82; box-shadow: inset 0 0 0 3px #222f53, 0 0 18px #a58cff33, 0 10px 20px #00000044; } /* narrow: the window would squash the title, so the card becomes a slim row */ @media (max-width: 760px) { .mcp { --mcp-h: auto; padding: 16px 18px; } .mcp__copy { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 14px; } .mcp__title { flex: 1 1 100%; font-size: 22px; } .mcp__scene { display: none; } } @media (prefers-reduced-motion: reduce) { .mcp, .mcp__btn, .mcp__btn::before, .mcp__btn-arrow, .mcp__live::before, .mcp__online-dot::before, .mcp__online-dot::after, .mcp__delta.is-on { animation: none; transition: none; } .mcp__btn::before { display: none; } } /* ══ One rhythm for the whole page: every block 20px apart ═══════════════ The blocks came with their own margins (18, 20, 24+24px) and an ad slot AdSense left empty still kept its 20+20px, so the gaps ran from 20 to ~90px. The container sets the spacing now; blocks carry no outer margin. */ .mycollection { gap: 20px; } .mycollection > * { margin-top: 0 !important; margin-bottom: 0 !important; } /* an ad slot AdSense could not fill must not leave a hole */ .mycollection > .gads-wrapper:has(ins.adsbygoogle[data-ad-status="unfilled"]) { display: none; } /* an empty legacy placeholder between the settings and the effects added a second gap */ .mycollection > #iconInput:empty { display: none; }