/* App Center Filter Component */ .app-center-filter { width: 100%; } /* Filter row - search, dropdown, view toggle */ .app-center-filter .filter-row { display: flex; gap: 12px; align-items: center; margin-bottom: 24px; } @media (max-width: 768px) { .app-center-filter .filter-row { flex-wrap: wrap; gap: 10px; } .app-center-filter .filter-row .search-input-wrapper { flex: 0 0 100%; width: 100%; } .app-center-filter .filter-row .category-dropdown { flex: 1 1 auto; min-width: 0; } .app-center-filter .filter-row .view-toggle { flex: 0 0 auto; } } .app-center-filter .search-input-wrapper { position: relative; flex: 1; } .app-center-filter .search-input { width: 100%; padding: 12px 40px 12px 16px; font-size: 16px; border: 1px solid #e5e7eb; border-radius: 8px; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; background: var(--background-light, #fff); color: var(--text-primary, #1a1a1a); } .app-center-filter .search-input::placeholder { color: #9ca3af; } .app-center-filter .search-input:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); } .app-center-filter .clear-button { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; font-size: 20px; color: #9ca3af; cursor: pointer; padding: 4px 8px; line-height: 1; } .app-center-filter .clear-button:hover { color: #6b7280; } /* Category dropdown */ .app-center-filter .category-dropdown { padding: 12px 36px 12px 16px; font-size: 14px; font-weight: 500; border: 1px solid #e5e7eb; border-radius: 8px; background: var(--background-light, #fff); color: var(--text-primary, #1a1a1a); cursor: pointer; outline: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; min-width: 180px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .app-center-filter .category-dropdown:hover { border-color: #d1d5db; } .app-center-filter .category-dropdown:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); } /* View toggle buttons */ .app-center-filter .view-toggle { display: flex; gap: 4px; background: #f3f4f6; padding: 4px; border-radius: 8px; } .app-center-filter .view-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; background: transparent; border-radius: 6px; cursor: pointer; color: #6b7280; transition: all 0.2s ease; } .app-center-filter .view-btn:hover { color: #374151; background: #e5e7eb; } .app-center-filter .view-btn.active { background: #fff; color: #3655E8; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .app-center-filter .category-section { scroll-margin-top: 100px; } .app-center-filter .category-section h2 { margin-top: 48px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #e5e7eb; font-size: 1.5rem; } .app-center-filter .category-section:first-of-type h2 { margin-top: 0; } .app-center-filter .cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } @media (max-width: 1024px) { .app-center-filter .cards-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .app-center-filter .cards-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .app-center-filter .cards-grid { grid-template-columns: 1fr; } /* Hide view toggle on mobile */ .app-center-filter .view-toggle { display: none; } /* Force list view styles on mobile */ .app-center-filter .cards-grid, .app-center-filter .cards-grid.grid { gap: 8px; } .app-center-filter .cards-grid .integration-card-wrapper, .app-center-filter .cards-grid.grid .integration-card-wrapper { height: auto; } .app-center-filter .cards-grid .integration-card, .app-center-filter .cards-grid.grid .integration-card { position: relative; flex-direction: row; text-align: left; padding: 12px 16px; height: auto; gap: 16px; } .app-center-filter .cards-grid .integration-card img, .app-center-filter .cards-grid.grid .integration-card img { margin: 0; width: 40px; height: 40px; flex-shrink: 0; } .app-center-filter .cards-grid .integration-text, .app-center-filter .cards-grid.grid .integration-text { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; align-items: flex-start; } .app-center-filter .cards-grid .integration-name, .app-center-filter .cards-grid.grid .integration-name { margin: 0; -webkit-line-clamp: 1; } .app-center-filter .cards-grid .integration-description, .app-center-filter .cards-grid.grid .integration-description { margin: 0; -webkit-line-clamp: 2; } .app-center-filter .cards-grid .integration-card:hover, .app-center-filter .cards-grid.grid .integration-card:hover { transform: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); height: auto; min-height: auto; overflow: hidden; } .app-center-filter .cards-grid .integration-card:hover .integration-name, .app-center-filter .cards-grid .integration-card:hover .integration-description, .app-center-filter .cards-grid.grid .integration-card:hover .integration-name, .app-center-filter .cards-grid.grid .integration-card:hover .integration-description { -webkit-line-clamp: 2; } } .app-center-filter .cards-grid { position: relative; } /* List view styles */ .app-center-filter .cards-grid.list { grid-template-columns: 1fr; gap: 8px; } .app-center-filter .cards-grid.list .integration-card-wrapper { height: auto; } .app-center-filter .cards-grid.list .integration-card { position: relative; flex-direction: row; text-align: left; padding: 12px 16px; height: auto; gap: 16px; } .app-center-filter .cards-grid.list .integration-card img { margin: 0; width: 40px; height: 40px; flex-shrink: 0; } .app-center-filter .cards-grid.list .integration-text { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; align-items: flex-start; } .app-center-filter .cards-grid.list .integration-name { margin: 0; -webkit-line-clamp: 1; } .app-center-filter .cards-grid.list .integration-description { margin: 0; -webkit-line-clamp: 1; } .app-center-filter .cards-grid.list .integration-card:hover { transform: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); height: auto; min-height: auto; overflow: hidden; } .app-center-filter .cards-grid.list .integration-card:hover .integration-name, .app-center-filter .cards-grid.list .integration-card:hover .integration-description { -webkit-line-clamp: 1; } .app-center-filter .integration-card-wrapper { position: relative; height: 180px; } .app-center-filter .integration-card { text-align: center; padding: 16px 12px; border: 1px solid #e5e7eb; border-radius: 8px; background: var(--background-light, #fff); transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; align-items: center; height: 180px; position: absolute; top: 0; left: 0; right: 0; z-index: 1; cursor: pointer; overflow: hidden; } .app-center-filter .integration-card:hover { transform: scale(1.08); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); z-index: 100; height: auto; min-height: 180px; overflow: visible; background: #ffffff !important; padding-bottom: 20px; } [data-theme="dark"] .app-center-filter .integration-card:hover, .dark .app-center-filter .integration-card:hover { background: #1f2937; } .app-center-filter .integration-card:hover .integration-name { -webkit-line-clamp: unset; } .app-center-filter .integration-card:hover .integration-description { -webkit-line-clamp: unset; display: block; } .app-center-filter .integration-card img { width: 48px; height: 48px; border-radius: 8px; margin: 0 auto 8px auto; display: block; object-fit: contain; flex-shrink: 0; cursor: default !important; pointer-events: none; } .app-center-filter .integration-name { font-weight: 600; margin: 4px 0 8px 0; font-size: 14px; flex-shrink: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; max-width: 100%; } .app-center-filter .integration-description { font-size: 12px; color: #666; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; margin-top: auto; } /* Infinite scroll loader */ .app-center-filter .load-more-sentinel { text-align: center; padding: 32px; color: #6b7280; } .app-center-filter .load-more-sentinel p { margin: 0; font-size: 14px; } .app-center-filter .no-results { text-align: center; padding: 80px 24px; color: #6b7280; display: flex; flex-direction: column; align-items: center; gap: 24px; } .app-center-filter .no-results p { margin: 0; font-size: 16px; } .app-center-filter .no-results button { padding: 12px 24px; background: #3655E8; color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500; transition: background 0.2s ease; } .app-center-filter .no-results button:hover { background: #2a45c9; } /* Dark mode support */ [data-theme="dark"] .app-center-filter .search-input, .dark .app-center-filter .search-input { background: #1e2028; border-color: #2e3039; color: #e5e7eb; } [data-theme="dark"] .app-center-filter .search-input::placeholder, .dark .app-center-filter .search-input::placeholder { color: #6b7280; } [data-theme="dark"] .app-center-filter .search-input:focus, .dark .app-center-filter .search-input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); } [data-theme="dark"] .app-center-filter .category-dropdown, .dark .app-center-filter .category-dropdown { background-color: #1e2028; border-color: #2e3039; color: #e5e7eb; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } [data-theme="dark"] .app-center-filter .category-dropdown:hover, .dark .app-center-filter .category-dropdown:hover { border-color: #3b4252; } [data-theme="dark"] .app-center-filter .category-dropdown:focus, .dark .app-center-filter .category-dropdown:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); } [data-theme="dark"] .app-center-filter .view-toggle, .dark .app-center-filter .view-toggle { background: #1e2028; border: 1px solid #2e3039; } [data-theme="dark"] .app-center-filter .view-btn, .dark .app-center-filter .view-btn { color: #6b7280; } [data-theme="dark"] .app-center-filter .view-btn:hover, .dark .app-center-filter .view-btn:hover { color: #e5e7eb; background: #2e3039; } [data-theme="dark"] .app-center-filter .view-btn.active, .dark .app-center-filter .view-btn.active { background: #0f1117; color: #3b82f6; box-shadow: none; } [data-theme="dark"] .app-center-filter .category-section h2, .dark .app-center-filter .category-section h2 { color: #f3f4f6; border-color: #2e3039; } [data-theme="dark"] .app-center-filter .integration-card, .dark .app-center-filter .integration-card { background: #1e2028; border-color: #2e3039; } [data-theme="dark"] .app-center-filter .integration-card:hover, .dark .app-center-filter .integration-card:hover { background: #1f2028 !important; border-color: #3b4252; } [data-theme="dark"] .app-center-filter .integration-name, .dark .app-center-filter .integration-name { color: #f3f4f6; } [data-theme="dark"] .app-center-filter .integration-description, .dark .app-center-filter .integration-description { color: #9ca3af; } [data-theme="dark"] .app-center-filter .no-results, .dark .app-center-filter .no-results { color: #9ca3af; } [data-theme="dark"] .app-center-filter .no-results button, .dark .app-center-filter .no-results button { background: #3b82f6; } [data-theme="dark"] .app-center-filter .no-results button:hover, .dark .app-center-filter .no-results button:hover { background: #2563eb; } /* Twilio navbar icon */ #navigation-items a[href="/documentation/integrations/twilio"] svg, #navigation-items a[href="/documentation/text-campaigns/twilio-sms"] svg { -webkit-mask-image: url("data:image/svg+xml;utf8,") !important; mask-image: url("data:image/svg+xml;utf8,") !important; width: 16px; height: 16px; max-width: none; max-height: none; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; } /* WhatsApp navbar icon */ #navigation-items a[href="/documentation/text-campaigns/whatsapp"] svg { -webkit-mask-image: url("data:image/svg+xml;utf8,") !important; mask-image: url("data:image/svg+xml;utf8,") !important; width: 16px; height: 16px; max-width: none; max-height: none; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; } /* Telnyx navbar icon */ #navigation-items a[href="/documentation/text-campaigns/telnyx-sms"] svg { -webkit-mask-image: url("data:image/svg+xml;utf8,") !important; mask-image: url("data:image/svg+xml;utf8,") !important; width: 16px; height: 16px; max-width: none; max-height: none; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; } /* Zapier navbar icon */ #navigation-items a[href="/documentation/integrations/zapier"] svg { -webkit-mask-image: url("data:image/svg+xml;utf8,") !important; mask-image: url("data:image/svg+xml;utf8,") !important; width: 16px; height: 16px; max-width: none; max-height: none; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; }

Get Started

Build Your Campaign

Using Callers

Integrations

Agencies

Webhook

Resources

Legal

Twilio

SIP

Telnyx