/* Match the focused How It Works guide without changing account behavior. */ :is(#streamerVotingModal, #successStoriesModal, #referralProgramModal, #submitStoryModal).capture-dialog { color: #fff; --referral-blue: #0057f6; --referral-cyan: #0057f6; --referral-panel: #000; --referral-panel-deep: #000; --referral-border: #ffffff26; } :is(#streamerVotingModal, #successStoriesModal, #referralProgramModal, #submitStoryModal).capture-dialog .modal-dialog { width: calc(100% - 48px); max-width: 960px; height: calc(100% - 48px); margin: 24px auto; } :is(#streamerVotingModal, #successStoriesModal, #referralProgramModal, #submitStoryModal).capture-dialog .modal-content { height: auto; max-height: 100%; background: #000 !important; color: #fff; border: 1px solid #ffffff30 !important; border-radius: 16px; box-shadow: 0 24px 100px #000a !important; overflow: hidden; } :is(#streamerVotingModal, #successStoriesModal, #referralProgramModal, #submitStoryModal).capture-dialog .modal-header { padding: 24px 32px 18px; min-height: 0; border: 0; background: #000 !important; box-shadow: none; } :is(#streamerVotingModal, #successStoriesModal, #referralProgramModal, #submitStoryModal).capture-dialog .modal-title { padding: 0; margin: 0; font-size: 24px; font-weight: 750; line-height: 1.3; letter-spacing: -.025em; text-shadow: none; color: #fff !important; justify-content: flex-start; text-align: left; } :is(#streamerVotingModal, #successStoriesModal, #referralProgramModal, #submitStoryModal).capture-dialog .btn-close { position: static; transform: none; margin: 0 0 0 auto; padding: 12px; opacity: .8; box-shadow: none; flex-shrink: 0; } :is(#streamerVotingModal, #successStoriesModal, #referralProgramModal, #submitStoryModal).capture-dialog .modal-body { flex: 1 1 auto; min-height: 0; max-height: none; height: auto; padding: 8px 32px 32px; overflow-y: auto !important; background: #000; scrollbar-color: #555 #000; } :is(#streamerVotingModal, #successStoriesModal, #referralProgramModal, #submitStoryModal).capture-dialog .modal-body::before { content: none; } :is(#streamerVotingModal, #successStoriesModal, #referralProgramModal, #submitStoryModal).capture-dialog .btn-primary { background: #0057f6; border: 1px solid #0057f6; border-radius: 8px; color: #fff; box-shadow: none; min-height: 42px; padding: 10px 18px; } :is(#streamerVotingModal, #successStoriesModal, #referralProgramModal, #submitStoryModal).capture-dialog .btn-primary:hover { background: #1968fa; } :is(#streamerVotingModal, #successStoriesModal, #referralProgramModal, #submitStoryModal).capture-dialog :is(button, a, input, textarea):focus-visible { outline: 2px solid #fff; outline-offset: 3px; box-shadow: none; } .capture-dialog .capture-dialog-intro { color: #fff; font-size: clamp(20px, 2.1vw, 26px); font-weight: 700; line-height: 1.4; letter-spacing: -.025em; text-wrap: balance; } :is(#streamerVotingModal, #successStoriesModal, #referralProgramModal, #submitStoryModal).capture-dialog * { text-shadow: none !important; } /* Same catalog and portrait source as the mobile directory. */ #streamerVotingModal.capture-dialog .modal-dialog { max-width: 680px; } #streamerVotingModal.capture-dialog .capture-streamer-request { color: #bdbdbd; font-size: 13px; line-height: 1.7; text-align: center; margin: 0 0 24px; } #streamerVotingModal.capture-dialog a { color: #6b9dff; text-decoration: none; } #streamerVotingModal.capture-dialog a:hover { text-decoration: underline; } #streamerVotingModal.capture-dialog .streamer-search-container { margin: 0 0 16px; padding: 0; border: 0; background: transparent; box-shadow: none; } #streamerVotingModal.capture-dialog .input-group { border: 1px solid #ffffff40; border-radius: 8px; overflow: visible; } #streamerVotingModal.capture-dialog .input-group > * { background: #000 !important; color: #fff; border: 0; min-height: 44px; box-shadow: none; } #streamerVotingModal.capture-dialog .input-group-text { border-radius: 8px 0 0 8px; color: #6b9dff; } #streamerVotingModal.capture-dialog .form-control { min-width: 0; border-radius: 8px; font: inherit; font-size: 15px; } #streamerVotingModal.capture-dialog .form-control::placeholder { color: #aaa; } #streamerVotingModal.capture-dialog .search-results-info { margin-top: 12px; } #streamerVotingModal.capture-dialog .text-muted { color: #bdbdbd !important; } #streamerVotingModal.capture-dialog .streamers-list { display: flex; flex-direction: column; gap: 0; padding: 0; margin: 0; overflow: visible; max-height: none; } #streamerVotingModal.capture-dialog .streamer-option { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 18px; width: 100%; padding: 16px 8px; background: #000; border: 0; border-bottom: 1px solid #ffffff1f; color: #fff; border-radius: 0; text-align: left; box-shadow: none; transition: background .15s; } #streamerVotingModal.capture-dialog .streamer-option:last-child { border-bottom: 0; } #streamerVotingModal.capture-dialog .streamer-option:is(:hover, :focus-visible) { background: #ffffff08; transform: none; } #streamerVotingModal.capture-dialog .streamer-portrait { display: grid; place-items: center; width: 56px; height: 56px; object-fit: cover; border-radius: 50%; background: #0057f6; color: #fff; font-weight: 700; font-size: 23px; } #streamerVotingModal.capture-dialog .streamer-name { font-size: 17px; font-weight: 650; overflow-wrap: anywhere; } #streamerVotingModal.capture-dialog .clip-count-display { color: #6b9dff; font-size: 13px; white-space: nowrap; background: none; border: 0; box-shadow: none; padding: 0; } #streamerVotingModal.capture-dialog .no-clips .clip-count-display { color: #aaa; } /* Approved community content retains all of its fields. */ #successStoriesModal.capture-dialog .capture-wins-intro { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 28px; } #successStoriesModal.capture-dialog .capture-dialog-intro { margin: 0; font-size: 20px; } #successStoriesModal.capture-dialog #storiesList { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } #successStoriesModal.capture-dialog .capture-win { padding: 24px; border: 1px solid #ffffff26; border-radius: 12px; min-width: 0; } .capture-win h3 { color: #fff; font-size: 21px; font-weight: 700; margin: 0 0 8px; } .capture-win-earnings { color: #6b9dff; font-weight: 650; margin-bottom: 20px; } .capture-win blockquote { color: #bdbdbd; font-size: 15px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; } .capture-win-author { color: #fff; font-weight: 600; margin: 20px 0 5px; } .capture-win-meta { color: #aaa; font-size: 12px; line-height: 1.6; margin: 0; overflow-wrap: anywhere; } #successStoriesModal.capture-dialog #emptyState h3 { font-size: 22px; font-weight: 650; } #successStoriesModal.capture-dialog #emptyState p { color: #bdbdbd; } /* Retain period summaries, copy-code, payout forms and history; remove old effects. */ #referralProgramModal.capture-dialog [class*="referral-"] { background: none; box-shadow: none; text-shadow: none; animation: none; } #referralProgramModal.capture-dialog [class*="referral-"]::before, #referralProgramModal.capture-dialog [class*="referral-"]::after { content: none; } #referralProgramModal.capture-dialog .referral-earnings-layout { display: flex; height: auto; gap: 24px; } #referralProgramModal.capture-dialog .referral-preview-layout { padding: 12px 0 4px; display: block; } #referralProgramModal.capture-dialog .referral-preview-layout .capture-dialog-intro { text-align: center; max-width: 540px; margin: 0 auto 30px; } .capture-referral-steps { margin: 0 auto; max-width: 600px; padding: 0; list-style: none; counter-reset: referral-step; } .capture-referral-steps li { position: relative; padding: 18px 0 18px 48px; border-top: 1px solid #ffffff1f; color: #bdbdbd; font-size: 15px; line-height: 1.6; counter-increment: referral-step; } .capture-referral-steps li::before { content: counter(referral-step); position: absolute; top: 19px; left: 0; display: grid; place-items: center; width: 26px; height: 26px; background: #0057f6; border-radius: 50%; font-size: 12px; color: #fff; font-weight: 650; } #referralProgramModal.capture-dialog .referral-header-code-wrap { border: 0; padding: 0; gap: 18px; flex-wrap: wrap; overflow: visible; justify-content: flex-start; } #referralProgramModal.capture-dialog .referral-header-label { color: #bdbdbd; font-weight: 500; font-size: 13px; } #referralProgramModal.capture-dialog .referral-header-code { color: #fff; font-size: 24px; letter-spacing: .08em; } #referralProgramModal.capture-dialog .referral-header-action { border: 0; } #referralProgramModal.capture-dialog .referral-header-copy { background: #0057f6; border: 0; border-radius: 6px; color: #fff; min-height: 40px; padding: 8px 14px; } #referralProgramModal.capture-dialog .referral-header-copy-label { display: inline; } #referralProgramModal.capture-dialog .referral-period-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 0 !important; } #referralProgramModal.capture-dialog .referral-period-separator { display: none; } #referralProgramModal.capture-dialog .referral-period-card { padding: 22px; min-width: 0; border: 1px solid #ffffff26; border-radius: 12px; color: #fff; } #referralProgramModal.capture-dialog .referral-period-card-current { border-top: 2px solid #0057f6; } #referralProgramModal.capture-dialog .referral-period-card-top { gap: 14px; align-items: start; } #referralProgramModal.capture-dialog .referral-period-range { color: #fff; font-size: 14px; } #referralProgramModal.capture-dialog .referral-period-state-tag { color: #bdbdbd; border: 0; padding: 0; font-size: 11px; } #referralProgramModal.capture-dialog .referral-period-payout-meta { color: #bdbdbd; font-size: 12px; } #referralProgramModal.capture-dialog .referral-period-payout-meta strong { color: #fff; } #referralProgramModal.capture-dialog .referral-period-amount { color: #fff; font-size: clamp(32px, 4vw, 44px); line-height: 1.2; margin: 24px 0 16px; } #referralProgramModal.capture-dialog .referral-period-payday { color: #bdbdbd; border: 0; padding: 0; font-size: 12px; } #referralProgramModal.capture-dialog .referral-period-payday strong { color: #bdbdbd; font-size: 12px; font-weight: 400; } #referralProgramModal.capture-dialog .referral-period-stats { margin-top: 18px; gap: 12px; color: #fff; } #referralProgramModal.capture-dialog .referral-period-stats span { border: 0; padding: 0; color: #bdbdbd; background: none; font-weight: 400; } #referralProgramModal.capture-dialog .referral-period-stats strong { color: #fff; font-weight: 600; } #referralProgramModal.capture-dialog .referral-period-range { font-weight: 650; } #referralProgramModal.capture-dialog .referral-period-state-tag { font-weight: 500; text-transform: none; } #referralProgramModal.capture-dialog .referral-period-amount { font-weight: 700; } #referralProgramModal.capture-dialog .referral-how-it-works-band { display: block; padding: 24px 0; margin: 0; border: 0; border-block: 1px solid #ffffff26; border-radius: 0; overflow: visible; } #referralProgramModal.capture-dialog .referral-how-title { display: block; color: #fff; padding: 0 0 16px; font-size: 16px; font-weight: 650; text-transform: none; border: 0; clip-path: none; } #referralProgramModal.capture-dialog .referral-how-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; padding: 0; margin: 0; } #referralProgramModal.capture-dialog .referral-how-step { display: block; color: #bdbdbd; padding: 0; margin: 0; border: 0; font-size: 14px; font-weight: 400; line-height: 1.6; min-height: 0; clip-path: none; text-align: left; justify-content: flex-start; } #referralProgramModal.capture-dialog .referral-how-arrow { display: none; } #referralProgramModal.capture-dialog .referral-lower-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } #referralProgramModal.capture-dialog .referral-panel { border: 0; border-radius: 0; padding: 0; overflow: visible; } #referralProgramModal.capture-dialog .referral-mini-row { border: 0; border-bottom: 1px solid #ffffff1f; border-radius: 0; padding: 14px 0; } #referralProgramModal.capture-dialog .referral-recent-minimal:empty { display: none; } #referralProgramModal.capture-dialog .referral-settings-form { gap: 14px; } #referralProgramModal.capture-dialog .form-control { border: 1px solid #ffffff40 !important; background: #000 !important; color: #fff; border-radius: 6px; } #referralProgramModal.capture-dialog .referral-paypal-brand i { color: #6b9dff; } #referralProgramModal.capture-dialog .referral-trial-locked-icon { background: #0057f6; border: 0; border-radius: 50%; } #referralProgramModal.capture-dialog .referral-trial-ok-btn { background: #0057f6; box-shadow: none; } #referralProgramModal.capture-dialog .referral-trial-locked-eyebrow { color: #bdbdbd; text-transform: none; letter-spacing: 0; font-size: 14px; } @media (max-width: 720px) { :is(#streamerVotingModal, #successStoriesModal, #referralProgramModal, #submitStoryModal).capture-dialog .modal-dialog { width: calc(100% - 20px); height: calc(100% - 20px); margin: 10px; } :is(#streamerVotingModal, #successStoriesModal, #referralProgramModal, #submitStoryModal).capture-dialog .modal-header { padding: 20px 22px 16px; } :is(#streamerVotingModal, #successStoriesModal, #referralProgramModal, #submitStoryModal).capture-dialog .modal-body { padding: 8px 22px 24px; } #streamerVotingModal.capture-dialog .streamer-option { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; padding-inline: 0; } #streamerVotingModal.capture-dialog .streamer-portrait { width: 48px; height: 48px; } #streamerVotingModal.capture-dialog .streamer-name { font-size: 15px; } #successStoriesModal.capture-dialog #storiesList, #referralProgramModal.capture-dialog .referral-period-row, #referralProgramModal.capture-dialog .referral-how-steps, #referralProgramModal.capture-dialog .referral-lower-grid { grid-template-columns: 1fr; } #referralProgramModal.capture-dialog .referral-lower-grid { grid-template-areas: "settings" "recent"; } #referralProgramModal.capture-dialog .referral-header-code-wrap { gap: 8px; } #referralProgramModal.capture-dialog .referral-header-code { font-size: 20px; } #referralProgramModal.capture-dialog .referral-header-meta { flex-basis: 100%; } } #submitStoryModal.capture-dialog .capture-submit-intro { margin: 0; color: #bdbdbd; font-size: 15px; line-height: 1.6; } #submitStoryModal.capture-dialog :is(.form-control, .form-select, .input-group) { background-color: #000 !important; border: 1px solid #ffffff40 !important; border-radius: 6px; color: #fff; box-shadow: none !important; } #submitStoryModal.capture-dialog .input-group > :is(.form-control, .form-select) { border: 0 !important; } #submitStoryModal.capture-dialog .form-text { color: #aaa !important; } #submitStoryModal.capture-dialog .alert-info { background: #000 !important; border: 1px solid #ffffff26 !important; color: #bdbdbd !important; font-size: 13px; line-height: 1.6; } #submitStoryModal.capture-dialog .form-label { color: #fff !important; font-size: 14px; }