.tdp-dashboard { --tdp-breakpoint-mobile: 767px; --tdp-color-twitch: #9146ff; --tdp-spacing: 1em; --tdp-spacing-half: calc( var(--tdp-spacing) / 2 ); --tdp-spacing-double: calc( var(--tdp-spacing) * 2 ); --tdp-border-radius: var(--tdp-spacing-half); font-size: 20px; .tdp-section { margin-bottom: var(--tdp-spacing-double)} .tdp-avatar { border-radius: 50%; border: 2px solid var(--tdp-color-twitch)} .tdp-section-headline { margin: 0 0 var(--tdp-spacing-half) 0} .tdp-twitch-avatar { width: 4em; height: auto; border-radius: 100%; border: 3px solid var(--tdp-color-twitch)} .tdp-button { display: inline-flex; align-items: center; gap: var(--tdp-spacing-half); padding: 0.75em 1.5em; border: 2px solid transparent; border-radius: var(--tdp-border-radius); text-decoration: none; font-weight: 500; cursor: pointer; transition: all 0.3s ease; text-align: center; white-space: nowrap; background-color: #f0f0f0; color: #333; line-height: inherit; &:hover { text-decoration: none} } .tdp-button--twitch { background-color: var(--tdp-color-twitch); color: #fff; &:hover { background-color: #7c3aed; color: #fff} } .tdp-button-icon { width: var(--tdp-spacing); height: var(--tdp-spacing); fill: currentColor; transition: all 0.3s ease} .tdp-message { padding: 0.75em var(--tdp-spacing); border-radius: 0.25em; margin: var(--tdp-spacing) 0; background-color: #d1ecf1; border: 1px solid #bee5eb; color: #0c5460; p { margin: 0} } .tdp-message--success { background-color: #d4edda; border: 1px solid #c3e6cb; color: #155724} .tdp-message--error { background-color: #f8d7da; border: 1px solid #f5c6cb; color: #721c24} &.tdp-no-connection { text-align: center; padding: 2.5em; border: 2px dashed; border-radius: var(--tdp-border-radius); margin: 1.25em 0} .tdp-connect-section { margin-top: 1.25em} .tdp-privacy-notice { color: #666; line-height: 1.4; max-width: 30em; margin: var(--tdp-spacing-double) auto 0} .tdp-dashboard-action-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25em; padding: var(--tdp-spacing); background: #f8f9fa; border-radius: var(--tdp-border-radius)} .tdp-dashboard-action-bar-buttons { display: flex; gap: var(--tdp-spacing); padding: var(--tdp-spacing); background: #fff; border-radius: var(--tdp-spacing)} .tdp-user-profile { display: flex; align-items: center; gap: var(--tdp-spacing)} .tdp-combined-profile-actions { display: flex; justify-content: space-between; align-items: center; padding: var(--tdp-spacing); border-radius: var(--tdp-border-radius); background: #fff; margin-bottom: var(--tdp-spacing-double); gap: var(--tdp-spacing); .tdp-user-content { display: flex; align-items: center; gap: var(--tdp-spacing)} .tdp-action-buttons { display: flex; gap: var(--tdp-spacing)} } .tdp-user-info { display: grid; gap: .5em; color: #333; & > * { margin: 0; line-height: 1} } .tdp-refresh-data-button { &:hover { background: #f5f5f5} &.tdp-loading .tdp-button-icon { animation: tdp-refresh-spin 1s linear infinite} } .tdp-logout-data-button { background: #f8d7da; color: #721c24; &:hover { color: #dc3545} } .tdp-followed-streamers {} .tdp-streamer-boxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(18.75em, 1fr)); gap: 1.25em; margin-top: 1.25em} .tdp-streamer-box { border: 1px solid #ddd; border-radius: var(--tdp-border-radius); padding: var(--tdp-spacing); background: #fff; display: flex; align-items: flex-start; position: relative; gap: var(--tdp-spacing); color: #666} .tdp-streamer-box.tdp-is-live { background: linear-gradient(135deg, #f8f9fa 0%, #f3f0ff 100%); border-color: var(--tdp-color-twitch); animation: tdp-livePulsate 2s ease-in-out infinite; &::before { content: "● Now Live"; position: absolute; top: calc( var(--tdp-spacing-half) * -1 ); right: var(--tdp-spacing-half); background: #ff0000; color: #fff; padding: 0.25em var(--tdp-spacing-half); border-radius: var(--tdp-border-radius); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; animation: tdp-liveBadgePulse 1.5s ease-in-out infinite; box-shadow: 0 2px var(--tdp-spacing-half) rgba(255, 0, 0, 0.3)} } .tdp-streamer-avatar { display: flex; justify-content: center; margin-top: calc( var(--tdp-spacing) * -1.5 ); img { background: #fff; width: 4em; border-radius: 100%; border: 2px solid var(--tdp-color-twitch)} } .tdp-streamer-info { display: grid; gap: var(--tdp-spacing-half); justify-items: start; & > * { margin: 0; width: 100%} } .tdp-streamer-username { line-height: 1; a { color: var(--tdp-color-twitch); text-decoration: none} } .tdp-sub-status { text-align: center; padding: 0.25em var(--tdp-spacing-half); border-radius: 0.25em; font-weight: 500; display: inline-block; border: 1px solid #f5c6cb; background: #f8d7da; color: #721c24; width: max-content; &.tdp-subscribed { background: #d4edda; color: #155724; border: 1px solid #c3e6cb} } .tdp-no-follows { padding: 2.5em; color: #666} .tdp-downloads-section {} .tdp-downloads-table { margin-top: 1.25em; background: #f8f9fa; border: 1px solid #e9ecef; border-radius: var(--tdp-border-radius); overflow: hidden} .tdp-download-row { display: flex; justify-content: space-between; align-items: center; padding: var(--tdp-spacing); gap: .5em; border-bottom: 1px solid #ddd; background: #f8f9fa} .tdp-download-row:last-child { border-bottom: none} .tdp-download-info { display: grid; gap: var(--tdp-spacing-half); color: #333} .tdp-download-title { font-weight: 600; margin: 0} .tdp-download-description, .tdp-download-access-reason { color: #666} .tdp-download-access-reason { background: #f2e9ff; color: var(--tdp-color-twitch); padding: 0.25em var(--tdp-spacing-half); border-radius: 0.25em; border-left: 3px solid var(--tdp-color-twitch); display: inline-block} .tdp-download-button { background: #28a745; color: #fff} .tdp-download-button:hover { background: #218838; color: #fff} .tdp-download-button .tdp-button-icon { width: 1.25em; height: 1.25em} } @media (max-width: 767px) { .tdp-dashboard { .tdp-combined-profile-actions { flex-direction: column} .tdp-combined-profile-actions .tdp-action-buttons { gap: var(--tdp-spacing-half)} .tdp-streamer-boxes { display: flex; flex-direction: column} .tdp-streamer-box { flex-direction: column} .tdp-download-row { flex-direction: column; align-items: start} } } @keyframes tdp-livePulsate { 0%, 100% { box-shadow: 0 2px 0.5em rgba(145, 70, 255, 0.3); border-color: var(--tdp-color-twitch)} 50% { box-shadow: 0 0.25em 1em rgba(145, 70, 255, 0.6); border-color: #7c3aed} } @keyframes tdp-liveBadgePulse { 0%, 100% { transform: scale(1); opacity: 1} 50% { transform: scale(1.05); opacity: 0.9} } @keyframes tdp-refresh-spin { from { transform: rotate(0deg)} to { transform: rotate(360deg)} }