@media (max-width: 768px) { .ch-feed { max-width: 100%; padding-left: 10px; padding-right: 10px; } .ch-feed .ch-activity-card { border-radius: 14px !important; padding: 12px !important; margin-bottom: 14px !important; overflow: visible !important; } .ch-feed .ch-activity-header { gap: 8px; } .ch-feed .ch-activity-content { font-size: 15px !important; line-height: 1.5 !important; } .ch-action-row { gap: 4px !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .ch-action-row::-webkit-scrollbar { display: none; } .ch-action-button { flex: 0 0 auto; min-height: 36px; padding: 8px 9px !important; font-size: 12px !important; } .ch-comment { gap: 7px; } .ch-comment-avatar { flex: 0 0 30px !important; } .ch-comment-avatar img { width: 30px !important; height: 30px !important; } .ch-comment-main { min-width: 0; max-width: calc(100% - 37px); } .ch-comment-bubble { max-width: 100% !important; width: auto !important; padding: 10px 12px !important; border-radius: 15px !important; } .ch-comment-actions { flex-wrap: wrap; gap: 10px !important; } .ch-comment-menu { opacity: 1 !important; } .ch-comment-menu-toggle { width: 28px !important; height: 28px !important; } .ch-comment-children { padding-left: 10px !important; } .ch-comment-depth-1, .ch-comment-depth-2, .ch-comment-depth-3 { margin-left: 0 !important; } .ch-comment-depth-1 .ch-comment-avatar, .ch-comment-depth-2 .ch-comment-avatar, .ch-comment-depth-3 .ch-comment-avatar { flex: 0 0 28px !important; } .ch-comment-depth-1 .ch-comment-avatar img, .ch-comment-depth-2 .ch-comment-avatar img, .ch-comment-depth-3 .ch-comment-avatar img { width: 28px !important; height: 28px !important; } .ch-feed .ch-comment-children > .ch-toggle-replies { margin-left: 54px !important; } .ch-repost-embed { border-radius: 14px !important; } .ch-repost-embed-header { padding: 12px 12px 0 !important; } .ch-repost-embed-text { padding: 9px 12px 12px !important; } .ch-repost-embed-media img, .ch-link-preview-image img { max-height: 280px !important; } .ch-link-preview-card { border-radius: 14px !important; } .ch-mention-dropdown { max-width: calc(100vw - 20px) !important; } } @media (max-width: 768px) { .ch-comment-reaction-wrap:hover .ch-reaction-picker, .ch-comment-reaction-wrap .ch-reaction-picker { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } body > .ch-mobile-reaction-picker { position: fixed !important; z-index: 2147483647 !important; display: flex !important; align-items: center !important; gap: 9px !important; padding: 9px 11px !important; background: #ffffff !important; border: 1px solid #dbe3ec !important; border-radius: 999px !important; box-shadow: 0 14px 38px rgba(15, 23, 42, 0.28) !important; max-width: calc(100vw - 20px) !important; overflow-x: auto !important; white-space: nowrap !important; -webkit-overflow-scrolling: touch; } body > .ch-mobile-reaction-picker[hidden] { display: none !important; } body > .ch-mobile-reaction-picker .ch-reaction-option { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } body > .ch-mobile-reaction-picker .ch-reaction-option-img { width: 31px !important; height: 31px !important; object-fit: contain !important; } body > .ch-mobile-reaction-picker .ch-reaction-option-emoji { font-size: 29px !important; line-height: 1 !important; } body.ch-mobile-reaction-open { touch-action: manipulation; } } @media (max-width: 768px) { .ch-comment-reaction-wrap .ch-reaction-picker, .ch-comment-reaction-wrap:hover .ch-reaction-picker, .ch-comment-reaction-wrap.is-picker-open .ch-reaction-picker { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } body > .ch-reaction-picker.ch-mobile-reaction-picker { display: none !important; } body > .ch-mobile-reaction-picker { position: fixed !important; z-index: 2147483647 !important; display: grid !important; grid-template-columns: repeat(5, 44px) !important; grid-auto-rows: 44px !important; gap: 8px !important; width: max-content !important; max-width: calc((44px * 5) + (8px * 4) + 22px) !important; padding: 10px 11px !important; background: #ffffff !important; border: 1px solid #dbe3ec !important; border-radius: 24px !important; box-shadow: 0 14px 38px rgba(15, 23, 42, 0.28) !important; overflow: visible !important; white-space: normal !important; } body > .ch-mobile-reaction-picker[hidden] { display: none !important; } body > .ch-mobile-reaction-picker .ch-reaction-option { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; max-width: 44px !important; max-height: 44px !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } body > .ch-mobile-reaction-picker .ch-reaction-option:active { transform: scale(0.94); } body > .ch-mobile-reaction-picker .ch-reaction-option-img { width: 31px !important; height: 31px !important; max-width: 31px !important; max-height: 31px !important; object-fit: contain !important; } body > .ch-mobile-reaction-picker .ch-reaction-option-emoji { font-size: 29px !important; line-height: 1 !important; } body.ch-mobile-reaction-open { touch-action: manipulation; } } @media (max-width: 768px) { .ch-reaction-trigger, .ch-reaction-option, .ch-mobile-reaction-picker { -webkit-user-select: none !important; user-select: none !important; -webkit-touch-callout: none !important; touch-action: manipulation !important; } } @media (max-width: 768px) { .ch-reaction-trigger, .ch-reaction-option, .ch-mobile-reaction-picker { -webkit-user-select: none !important; user-select: none !important; -webkit-touch-callout: none !important; touch-action: manipulation !important; } .ch-reaction-trigger.is-busy { opacity: 0.65; pointer-events: none; } } @media (max-width: 768px) { .ch-reaction-trigger, .ch-reaction-option, .ch-mobile-reaction-picker, .ch-mobile-reaction-picker * { -webkit-user-select: none !important; user-select: none !important; -webkit-touch-callout: none !important; } .ch-reaction-trigger { touch-action: manipulation !important; } .ch-reaction-option, .ch-mobile-reaction-picker, .ch-mobile-reaction-picker * { touch-action: none !important; } .ch-reaction-trigger.is-busy { opacity: 0.65; } } @media (max-width: 768px) { .ch-action-row { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 6px !important; overflow: visible !important; } .ch-action-row .ch-action-button, .ch-action-row .ch-reaction-trigger { width: 100% !important; min-width: 0 !important; max-width: 100% !important; justify-content: center !important; padding: 8px 6px !important; font-size: 12px !important; overflow: hidden !important; } .ch-action-row .ch-reaction-trigger .ch-reaction-label { max-width: 58px !important; overflow: hidden !important; text-overflow: ellipsis !important; } .ch-action-row .ch-reaction-trigger .ch-reaction-count { display: none !important; } .ch-action-row .ch-reaction-trigger .ch-reaction-emoji, .ch-action-row .ch-reaction-trigger .ch-reaction-icon-img { margin-right: 3px !important; } } @media (max-width: 768px) { .ch-action-row { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 6px !important; overflow: visible !important; } .ch-action-row .ch-action-button, .ch-action-row .ch-reaction-trigger { width: 100% !important; min-width: 0 !important; max-width: 100% !important; justify-content: center !important; padding: 8px 6px !important; font-size: 12px !important; overflow: hidden !important; } .ch-action-row .ch-reaction-trigger .ch-reaction-label, .ch-repost-button-label { max-width: 58px !important; overflow: hidden !important; text-overflow: ellipsis !important; } .ch-action-row .ch-reaction-trigger .ch-reaction-count { display: none !important; } .ch-action-row .ch-reaction-trigger .ch-reaction-emoji, .ch-action-row .ch-reaction-trigger .ch-reaction-icon-img, .ch-repost-button-icon { margin-right: 3px !important; } .ch-repost-combo-menu { width: 180px !important; max-width: calc(100vw - 20px) !important; } .ch-repost-combo-button, .ch-repost-combo-menu, .ch-repost-combo-menu * { -webkit-user-select: none !important; user-select: none !important; -webkit-touch-callout: none !important; touch-action: manipulation !important; } } @media (max-width: 768px) { .ch-action-row .ch-reaction-trigger.is-liked .ch-reaction-label { display: none !important; } .ch-action-row .ch-reaction-trigger.is-liked .ch-reaction-emoji, .ch-action-row .ch-reaction-trigger.is-liked .ch-reaction-icon-img { margin-right: 0 !important; } .ch-action-row .ch-reaction-trigger:not(.is-liked) .ch-reaction-label { display: inline !important; } } @media (max-width: 768px) { .ch-profile-page { max-width: 100%; padding-left: 10px; padding-right: 10px; } .ch-profile-card { border-radius: 18px; } .ch-profile-cover { height: 150px; } .ch-profile-main { display: block; padding: 0 14px 16px; } .ch-profile-avatar-wrap { margin-top: -48px; } .ch-profile-avatar { width: 104px; height: 104px; border-width: 4px; } .ch-profile-info { padding-top: 10px; } .ch-profile-name { font-size: 24px; } .ch-profile-handle { font-size: 13px; } .ch-profile-bio { font-size: 14px; } .ch-profile-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; } .ch-profile-stat { min-width: 0; padding: 9px 8px; } .ch-profile-stat strong { font-size: 15px; } .ch-profile-stat span { font-size: 11px; } .ch-profile-actions { padding-top: 14px; } .ch-profile-action-button { width: 100%; } .ch-profile-tabs { overflow-x: auto; scrollbar-width: none; } .ch-profile-tabs::-webkit-scrollbar { display: none; } .ch-profile-tab { flex: 0 0 auto; padding: 9px 13px; font-size: 12px; } .ch-profile-section-header { padding: 13px 14px; } .ch-profile-section-header h2 { font-size: 16px; } .ch-profile-posts.ch-feed { max-width: 100%; padding-left: 0; padding-right: 0; } } @media (max-width: 768px) { .ch-profile-route-wrap { margin: 18px auto; } .ch-profile-about-card, .ch-profile-comments-list, .ch-profile-media-grid { max-width: 100%; } .ch-profile-about-row { align-items: flex-start; flex-direction: column; gap: 4px; } .ch-profile-media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .ch-profile-media-tile { border-radius: 14px; } .ch-profile-comment-preview { border-radius: 14px; padding: 13px; } } @media (max-width: 768px) { .ch-profile-notice { max-width: 100%; margin-left: 10px; margin-right: 10px; border-radius: 14px; } .ch-profile-edit-form { max-width: 100%; border-radius: 16px; padding: 14px; } .ch-profile-edit-grid { grid-template-columns: 1fr; gap: 12px; } .ch-profile-edit-preview-row { grid-template-columns: 1fr; gap: 14px; } .ch-profile-edit-avatar-preview { width: 104px; height: 104px; } .ch-profile-edit-cover-preview img, .ch-profile-edit-cover-empty { height: 120px; border-radius: 14px; } .ch-profile-edit-actions { display: grid; grid-template-columns: 1fr; } .ch-profile-edit-save, .ch-profile-edit-cancel { width: 100%; justify-content: center; } } @media (max-width: 768px) { .ch-profile-edit-header { align-items: flex-start; flex-direction: column; } .ch-profile-edit-preview-row-top { grid-template-columns: 1fr !important; } .ch-profile-edit-avatar-card, .ch-profile-edit-cover-card { padding: 12px; border-radius: 16px; } .ch-profile-edit-media-actions { display: grid; grid-template-columns: 1fr; gap: 8px; } .ch-profile-file-button, .ch-profile-remove-check { width: 100%; justify-content: center; } } @media (max-width: 768px) { .ch-profile-section-header, .ch-profile-about-card, .ch-profile-edit-form, .ch-profile-notice, .ch-profile-comments-list, .ch-profile-media-grid, .ch-profile-posts.ch-feed { width: 100% !important; max-width: 100% !important; } .ch-profile-edit-form { padding: 14px !important; } .ch-profile-edit-preview-row, .ch-profile-edit-preview-row-top { grid-template-columns: 1fr !important; gap: 12px !important; } .ch-profile-edit-cover-preview img, .ch-profile-edit-cover-empty { height: 150px !important; } .ch-profile-edit-media-actions { gap: 8px !important; } .ch-profile-file-button, .ch-profile-remove-button { min-height: 36px !important; font-size: 12px !important; padding: 9px 12px !important; } } @media (max-width: 768px) { .ch-profile-actions { display: grid !important; grid-template-columns: 1fr; gap: 8px !important; } .ch-profile-settings-shell { width: 100% !important; max-width: 100% !important; grid-template-columns: 1fr !important; gap: 10px !important; } .ch-profile-settings-nav { position: static !important; display: flex !important; gap: 7px !important; overflow-x: auto !important; padding: 8px !important; border-radius: 16px !important; scrollbar-width: none; } .ch-profile-settings-nav::-webkit-scrollbar { display: none; } .ch-profile-settings-nav-item { flex: 0 0 auto; min-height: 36px; padding: 8px 11px; font-size: 12px; } .ch-profile-settings-card { border-radius: 16px !important; padding: 14px !important; } .ch-profile-settings-card-head { display: grid !important; grid-template-columns: 1fr; gap: 10px !important; } .ch-profile-settings-button, .ch-profile-settings-status { width: fit-content; } .ch-profile-settings-row, .ch-profile-settings-option { align-items: flex-start !important; flex-direction: column !important; gap: 4px !important; } .ch-profile-settings-row strong, .ch-profile-settings-option strong { text-align: left !important; } } @media (max-width: 768px) { .ch-profile-privacy-grid { grid-template-columns: 1fr !important; gap: 10px !important; } .ch-profile-privacy-field, .ch-profile-toggle-row { border-radius: 14px !important; padding: 11px !important; } .ch-profile-privacy-summary { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 7px !important; } .ch-profile-settings-actions { justify-content: stretch !important; } .ch-profile-settings-save { width: 100% !important; min-height: 42px !important; } } @media (max-width: 768px) { .ch-profile-notifications-master, .ch-profile-notifications-grid, .ch-profile-notifications-summary { grid-template-columns: 1fr !important; gap: 10px !important; } .ch-profile-notification-toggle { min-height: 0 !important; } .ch-profile-notifications-form { gap: 14px !important; } } @media (max-width: 720px) { .ch-profile-blocked-add { grid-template-columns: 1fr; align-items: stretch; } .ch-profile-blocked-add .ch-profile-settings-save { width: 100%; } .ch-profile-blocked-user { align-items: flex-start; } .ch-profile-blocked-user-main { min-width: 0; flex: 1 1 auto; } .ch-profile-unblock-check { flex: 0 0 auto; } } @media (max-width: 480px) { .ch-profile-blocked-user { flex-direction: column; align-items: stretch; } .ch-profile-unblock-check { justify-content: center; width: 100%; } } @media (max-width: 640px) { .ch-block-member-results { position: relative; top: auto; margin-top: 8px; max-height: 240px; } .ch-profile-blocked-add { grid-template-columns: 1fr; } } @media (max-width: 720px) { .ch-profile-account-grid, .ch-profile-badges-shell-grid, .ch-profile-account-status-grid { grid-template-columns: 1fr !important; } .ch-profile-account-actions-row { flex-direction: column; } .ch-profile-account-actions-row .ch-profile-settings-button, .ch-profile-account-actions-row .ch-profile-settings-button-secondary { width: 100%; text-align: center; justify-content: center; } .ch-profile-account-field, .ch-profile-badges-shell-item, .ch-profile-account-status-grid > div { padding: 13px; } } @media (max-width: 720px) { .ch-user-badges { gap:6px; } .ch-user-badge { font-size:11px; padding:5px 9px; } .ch-profile-badges-info-grid { grid-template-columns:1fr; } } .ch-user-badge-img { width: 17px !important; height: 17px !important; object-fit: contain !important; } @media (max-width: 782px) { .ch-user-badge-tooltip { max-width: min(250px, calc(100vw - 32px)) !important; font-size: 12px !important; } .ch-user-badges-feed, .ch-user-badges-comment, .ch-user-badges-embed { margin-left: 4px !important; } .ch-user-badges-feed .ch-user-badge, .ch-user-badges-comment .ch-user-badge, .ch-user-badges-embed .ch-user-badge { padding: 3px 6px !important; } } @media (max-width: 900px) { .ch-member-directory { max-width: 100%; } .ch-member-directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .ch-member-directory { padding: 0 10px; } .ch-member-directory-hero { display: grid; padding: 18px; border-radius: 20px; } .ch-member-directory-hero h1 { font-size: 28px; } .ch-member-directory-count { min-width: 0; width: 100%; display: block; } .ch-member-directory-search { display: grid; align-items: stretch; } .ch-member-directory-search button, .ch-member-directory-clear { width: 100%; } .ch-member-directory-grid { grid-template-columns: 1fr; } .ch-member-card-cover { height: 104px; } .ch-member-card-body { padding: 0 14px 14px; } .ch-member-directory-pagination { flex-wrap: wrap; } } @media (max-width: 768px) { .ch-single-post-shell { width: 100% !important; max-width: 100% !important; margin: 14px auto 30px !important; padding-left: 10px !important; padding-right: 10px !important; } .ch-single-post-header { border-radius: 16px !important; padding: 14px !important; } .ch-single-post-header h1 { font-size: 20px !important; } } @media (max-width: 768px) { .ch-community-feed-page { margin: 16px auto 32px; padding: 0 10px; } .ch-community-feed-header { max-width: 100%; border-radius: 16px; padding: 14px; align-items: flex-start; flex-direction: column; } .ch-community-feed-header h1 { font-size: 22px; } .ch-community-feed-header-link { width: 100%; } } @media (max-width: 720px) { .ch-notifications-page { padding: 18px 12px 46px; } .ch-notifications-header { display: grid; gap: 14px; } .ch-notifications-actions { justify-content: stretch; } .ch-notifications-actions .ch-button, .ch-notifications-actions form, .ch-notifications-actions button { width: 100%; } .ch-notification-row { padding: 14px; border-radius: 14px; } } @media (max-width: 760px) { .ch-community-feed-header { align-items: stretch; } .ch-hub-page-nav, .ch-community-feed-nav, .ch-notifications-nav { width: 100%; justify-content: stretch; } .ch-community-feed-nav, .ch-notifications-nav { display: grid; grid-template-columns: 1fr; gap: 8px; } .ch-hub-nav-button, a.ch-hub-nav-button { width: 100%; min-height: 42px; } .ch-member-directory-hero { display: grid; } .ch-member-directory-side { min-width: 0; width: 100%; } .ch-member-directory-nav { grid-template-columns: 1fr; } .ch-notifications-actions { display: grid; grid-template-columns: 1fr; gap: 10px; } } .ch-reaction-trigger,.ch-reaction-total{touch-action:manipulation;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.ch-reaction-users-panel.is-mobile-sheet.is-visible{display:block!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important} nn/**/n@media (max-width: 768px) {n .ch-action-row .ch-reaction-trigger.is-liked {n background: #2563eb !important;n color: #ffffff !important;n border-color: #2563eb !important;n border-radius: 999px !important;n font-weight: 900 !important;n box-shadow: 0 0 0 2px rgba(37,99,235,.26), 0 6px 16px rgba(37,99,235,.24) !important;n opacity: 1 !important;n }nn .ch-action-row .ch-reaction-trigger.is-liked .ch-reaction-label,n .ch-action-row .ch-reaction-trigger.is-liked .ch-reaction-emoji {n color: #ffffff !important;n }nn .ch-action-row .ch-reaction-trigger.is-liked .ch-reaction-icon-img {n opacity: 1 !important;n filter: none !important;n }n}n @media (max-width: 768px) { .ch-action-row .ch-reaction-trigger { transform: translateZ(0); transform-origin: center; transition: transform 150ms cubic-bezier(.2,.8,.2,1), box-shadow 180ms ease, background-color 180ms ease, color 180ms ease, border-color 180ms ease, opacity 140ms ease !important; will-change: transform; } .ch-action-row .ch-reaction-trigger.ch-reaction-pressing { transform: scale(.955); } .ch-action-row .ch-reaction-trigger.ch-reaction-celebrate { animation: ch-mobile-reaction-pop 340ms cubic-bezier(.16,1,.3,1) both; } .ch-action-row .ch-reaction-trigger.ch-reaction-celebrate .ch-reaction-emoji, .ch-action-row .ch-reaction-trigger.ch-reaction-celebrate .ch-reaction-icon-img { animation: ch-mobile-reaction-icon-pop 340ms cubic-bezier(.16,1,.3,1) both; } .ch-action-row .ch-reaction-trigger.is-liked { box-shadow: 0 0 0 2px rgba(37,99,235,.28), 0 7px 18px rgba(37,99,235,.26) !important; } } @keyframes ch-mobile-reaction-pop { 0% { transform: scale(.96); } 48% { transform: scale(1.075); } 72% { transform: scale(.995); } 100% { transform: scale(1); } } @keyframes ch-mobile-reaction-icon-pop { 0% { transform: scale(.88) rotate(-4deg); } 48% { transform: scale(1.18) rotate(3deg); } 100% { transform: scale(1) rotate(0); } } @media (prefers-reduced-motion: reduce) { .ch-action-row .ch-reaction-trigger, .ch-action-row .ch-reaction-trigger.ch-reaction-celebrate, .ch-action-row .ch-reaction-trigger.ch-reaction-celebrate .ch-reaction-emoji, .ch-action-row .ch-reaction-trigger.ch-reaction-celebrate .ch-reaction-icon-img { animation: none !important; transition-duration: 0.01ms !important; } } @media (max-width: 720px){ .ch-account-danger-zone{padding:15px;border-radius:15px} .ch-account-lifecycle-actions-grid{grid-template-columns:1fr} .ch-account-lifecycle-action-card{padding:14px} .ch-account-danger-zone .ch-profile-settings-button{width:100%;justify-content:center;text-align:center} } @media (max-width: 782px){ .ch-community-feed-page .ch-community-discovery{ margin:0 0 12px; } .ch-community-feed-page .ch-community-discovery-heading p{ max-width:36rem; } } @media (max-width:768px){ body>.ch-mobile-reaction-picker>.ch-seasonal-reaction-row{ grid-column:1/-1!important; display:grid!important; grid-template-columns:repeat(5,38px)!important; grid-auto-rows:38px!important; justify-content:center!important; align-items:center!important; gap:5px!important; width:100%!important; min-height:44px!important; padding:3px 4px!important; border-radius:12px!important; } body>.ch-mobile-reaction-picker>.ch-seasonal-reaction-row .ch-reaction-option{ width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;max-width:38px!important;max-height:38px!important; } body>.ch-mobile-reaction-picker>.ch-seasonal-reaction-row .ch-reaction-option-emoji{font-size:27px!important} }