.vjs-airplay-button .vjs-icon-placeholder{background:url('data:image/svg+xml,%0A %0A %0A %0A %0A %0A %0A %0A %0A %0A %0A %0A %0A %0A%0A') center center no-repeat;background-size:contain;display:inline-block;width:22px;height:22px}.vjs-airplay-button:hover{cursor:pointer}.vjs-airplay-button:hover .vjs-icon-placeholder{background-image:url('data:image/svg+xml,%0A %0A %0A %0A %0A %0A %0A %0A %0A %0A %0A %0A %0A %0A%0A')}.vjs-airplay-button.vjs-airplay-button-lg:not(.vjs-hidden){display:flex;align-items:center;width:auto;padding:0 4px}.vjs-airplay-button.vjs-airplay-button-lg:not(.vjs-hidden) .vjs-airplay-button-label{flex-grow:1;margin-left:4px}.vjs-airplay-button.vjs-airplay-button-lg:not(.vjs-hidden) .vjs-icon-placeholder{flex-grow:1}.vjs-chromecast-button .vjs-icon-placeholder{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAvJJREFUaAXtmTtoFFEUhrMhpRZipQELBQsbwUoEQYPaWFhpYSloJ1bai502tqnVRojYWPlA1CKCjWUKLYRsGmOKdKKs3xnmzpz57+xjdMaZhTnw79zzuOdx79zH7i4s9NSPQD8C/Qh0ZgRGo9EyeAKGoGu0SUKW27IfsEFgUsVn+P1B1tHnNnkdHwwGm5bfokvyAe2uJ2/pWo73rWHkZ2AIfyCRdv9jixk4aGn6AkY+bwwynZe31bYF6WOH/Pwr5PVz0+4LaHuq+hloewaWQgJhVQd+Xp79K9T2TM39DGRrgINul9G060TAV9ovwEfWR+EURNY9sqN6DG0hXwXn2sxac4tyUYMx/DvkJ6PO/0Gg+UQh1WAKv4b+cOSkQYHmE0JlN04M9iK067RdUw+B8+Ai2AfKaAfhFdbHqzJl3TIrwPuc6dyizxJYAc9AGf1CeNM7bqqtwSvHwcEp8EEdpfzDyg4rdtC4Fbvn5ji6BWzklRqdCQ2WZ5S2MNgFG+ANuAtOREa57QX0O8CTFdXYVusDWTvKTQ1S3gq6HBkjQH4MaBE/kDWyO+G3QFFOBW3MrCOKEkNmM6Gv01rkvAaBphS5VIMS/juyM9oRma0JpdoPOw2gedgrsQccBVfBU/ATKJmsrAjdnd5HAf5RoIlMdUeHI6Bs/7eZKLxO8LbFKtW6oNX51AKCAR1vg9/iYD3owxO9FrsadHU8JX68C00KQmcrQqmwO6E8KwZ2i82uKpP8z6IT33EBGNg5YLvNDRAFRqYjvOEDo7drh22jnmpbzN6ptX3spC0Gr+ELv5PC25rQhV047NA/Ap7uRYH+UuCdWju4WQwNea7AP8Yumwluf1+QPRe7S8K/FL6w2E2niczKi1/71pjQuAJMaUVcT6zyDy3gdK5KWt+ET35BFlkd7NvgZFIBZnMtGKbPT8IX/i1Bl41MatdEAdv4viN5jJ1a+6KfEdNth52nSnpz5DtXbA+xj/5iypLrG/0I9CPQj0ArI/AHixCE2UoSwqgAAAAASUVORK5CYII=) center center no-repeat;background-size:contain;display:inline-block;width:22px;height:22px}.vjs-chromecast-button:hover{cursor:pointer}.vjs-chromecast-button:hover .vjs-icon-placeholder{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAvJJREFUaAXtmTtoFFEUhrMhpRZipQELBQsbwUoEQYPaWFhpYSloJ1bai502tqnVRojYWPlA1CKCjWUKLYRsGmOKdKKs3xnmzpz57+xjdMaZhTnw79zzuOdx79zH7i4s9NSPQD8C/Qh0ZgRGo9EyeAKGoGu0SUKW27IfsEFgUsVn+P1B1tHnNnkdHwwGm5bfokvyAe2uJ2/pWo73rWHkZ2AIfyCRdv9jixk4aGn6AkY+bwwynZe31bYF6WOH/Pwr5PVz0+4LaHuq+hloewaWQgJhVQd+Xp79K9T2TM39DGRrgINul9G060TAV9ovwEfWR+EURNY9sqN6DG0hXwXn2sxac4tyUYMx/DvkJ6PO/0Gg+UQh1WAKv4b+cOSkQYHmE0JlN04M9iK067RdUw+B8+Ai2AfKaAfhFdbHqzJl3TIrwPuc6dyizxJYAc9AGf1CeNM7bqqtwSvHwcEp8EEdpfzDyg4rdtC4Fbvn5ji6BWzklRqdCQ2WZ5S2MNgFG+ANuAtOREa57QX0O8CTFdXYVusDWTvKTQ1S3gq6HBkjQH4MaBE/kDWyO+G3QFFOBW3MrCOKEkNmM6Gv01rkvAaBphS5VIMS/juyM9oRma0JpdoPOw2gedgrsQccBVfBU/ATKJmsrAjdnd5HAf5RoIlMdUeHI6Bs/7eZKLxO8LbFKtW6oNX51AKCAR1vg9/iYD3owxO9FrsadHU8JX68C00KQmcrQqmwO6E8KwZ2i82uKpP8z6IT33EBGNg5YLvNDRAFRqYjvOEDo7drh22jnmpbzN6ptX3spC0Gr+ELv5PC25rQhV047NA/Ap7uRYH+UuCdWju4WQwNea7AP8Yumwluf1+QPRe7S8K/FL6w2E2niczKi1/71pjQuAJMaUVcT6zyDy3gdK5KWt+ET35BFlkd7NvgZFIBZnMtGKbPT8IX/i1Bl41MatdEAdv4viN5jJ1a+6KfEdNth52nSnpz5DtXbA+xj/5iypLrG/0I9CPQj0ArI/AHixCE2UoSwqgAAAAASUVORK5CYII=)}.vjs-chromecast-button.vjs-chromecast-casting-state .vjs-icon-placeholder{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAA49JREFUaAXtmTtoFFEUhrMhVtFCBEEDFgoWNqIgaCAQg9pYWGlhKWgnNkaxDHba2KZWGyFiI0J8ohZRbOwMqIWQpDGmSCfK+p1x7+y5/8zuzmQ3yQbmwL9z3vfc59zdHRioqBqBagSqEeibEajX6yPgIVgE/UYLFGS1jfgBqwWhYfiMvCvo+vS5TF2Ha7XagtU36Iq8C9/vxVu5VuMdY4z8DCwi70m0/f+xxAzstTJ9B+q+bhxSm9dvFm8b0rcd6vNLyNu3DF91YLOnaqhoAboGi8at1S+s8U7xW34JpTNQtMedRmSj7WVmYJLi5je6wJ63x14YA89sT6wnaeHaltpLyyQ8CT5q4l7JWpDmDfb0bYvDKkq7TgR8h38KPrA/orcguoSIsSV4E0yBbYmyRx+6J60DPrXaB8yhBS2hnwanfALPYzsCvoKekc9vvCZWe8ZBAxryW57HM8H/G9iNrWdLStvQetRetAMhzwzMfk2CbhjMBqdunjm5o3TB7vfADpR2nbZr6j5wGpwFO0EeraC8wFp84Y20Moz8Ghzz+rK8rnGr3udQu7elPDFDYAI8Bnn0B+XVNKDBoLPl1NWeyMkZta/2jjLRo+B9lKUp3NMEmGxj/266lONy8kUJ1F5YJss1YCOvlDcTt9SpqKwFaZzabROvgnnwCkyBoxmnhgLbGbACPFmnoqMWeRCs6WTStn1Dxqu91SlkHTqfcUaB/hDQTvxCF51OyPbGLk3apiZQe6sOhLg5mKgwS4DOZkKX04wmx6f03SknB2mapPZOHbDIn2BcA9HZnlA64f0w2gWwFPl44zVY7eawHRwEF8EjkHeCmG5cg9Hp6fQux+cLfoUpJz6KVXtGxvsAyDv/bSai5YQ8CpR0Q19Xh3ayFqS+am8pEzgJ/kqCOQ3Arp2dVp9uZGk/ewq1S06wdUIpOp0w6mljt9j0qtIufxGbNp6JwcHeA3baXAGZhtHpCEdfL7HbtcOOUU+5N9dM4wUUPqnxmRBxeIlsF7uUkG1P6MaOXnbY7wNPt9MEXTI+qfEh3WBg5DmB/AC/dCa4/X1D90T8zon8XORos5tNCykqS1771phQqw6Y0TpxOfFqfmgHxpqmhPshcvILsuh6Ib4JSdp1wHwuBcfG85PI0b8l2NKRafitRweWyX1D6mg5tfZFPyWm2152nkrZLZEPLskv4p/5iyktrmKqEahGoBqBTRmBfwb8WzXqcsYyAAAAAElFTkSuQmCC)}.vjs-chromecast-button.vjs-chromecast-casting-state:hover .vjs-icon-placeholder{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAA49JREFUaAXtmTtoFFEUhrMhVtFCBEEDFgoWNqIgaCAQg9pYWGlhKWgnNkaxDHba2KZWGyFiI0J8ohZRbOwMqIWQpDGmSCfK+p1x7+y5/8zuzmQ3yQbmwL9z3vfc59zdHRioqBqBagSqEeibEajX6yPgIVgE/UYLFGS1jfgBqwWhYfiMvCvo+vS5TF2Ha7XagtU36Iq8C9/vxVu5VuMdY4z8DCwi70m0/f+xxAzstTJ9B+q+bhxSm9dvFm8b0rcd6vNLyNu3DF91YLOnaqhoAboGi8at1S+s8U7xW34JpTNQtMedRmSj7WVmYJLi5je6wJ63x14YA89sT6wnaeHaltpLyyQ8CT5q4l7JWpDmDfb0bYvDKkq7TgR8h38KPrA/orcguoSIsSV4E0yBbYmyRx+6J60DPrXaB8yhBS2hnwanfALPYzsCvoKekc9vvCZWe8ZBAxryW57HM8H/G9iNrWdLStvQetRetAMhzwzMfk2CbhjMBqdunjm5o3TB7vfADpR2nbZr6j5wGpwFO0EeraC8wFp84Y20Moz8Ghzz+rK8rnGr3udQu7elPDFDYAI8Bnn0B+XVNKDBoLPl1NWeyMkZta/2jjLRo+B9lKUp3NMEmGxj/266lONy8kUJ1F5YJss1YCOvlDcTt9SpqKwFaZzabROvgnnwCkyBoxmnhgLbGbACPFmnoqMWeRCs6WTStn1Dxqu91SlkHTqfcUaB/hDQTvxCF51OyPbGLk3apiZQe6sOhLg5mKgwS4DOZkKX04wmx6f03SknB2mapPZOHbDIn2BcA9HZnlA64f0w2gWwFPl44zVY7eawHRwEF8EjkHeCmG5cg9Hp6fQux+cLfoUpJz6KVXtGxvsAyDv/bSai5YQ8CpR0Q19Xh3ayFqS+am8pEzgJ/kqCOQ3Arp2dVp9uZGk/ewq1S06wdUIpOp0w6mljt9j0qtIufxGbNp6JwcHeA3baXAGZhtHpCEdfL7HbtcOOUU+5N9dM4wUUPqnxmRBxeIlsF7uUkG1P6MaOXnbY7wNPt9MEXTI+qfEh3WBg5DmB/AC/dCa4/X1D90T8zon8XORos5tNCykqS1771phQqw6Y0TpxOfFqfmgHxpqmhPshcvILsuh6Ib4JSdp1wHwuBcfG85PI0b8l2NKRafitRweWyX1D6mg5tfZFPyWm2152nkrZLZEPLskv4p/5iyktrmKqEahGoBqBTRmBfwb8WzXqcsYyAAAAAElFTkSuQmCC)}.vjs-chromecast-button.vjs-chromecast-button-lg:not(.vjs-hidden){display:flex;align-items:center;width:auto;padding:0 4px}.vjs-chromecast-button.vjs-chromecast-button-lg:not(.vjs-hidden) .vjs-chromecast-button-label{flex-grow:1;margin-left:4px}.vjs-chromecast-button.vjs-chromecast-button-lg:not(.vjs-hidden) .vjs-icon-placeholder{flex-grow:1}.vjs-tech-chromecast{display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:hidden}.vjs-tech-chromecast .vjs-tech-chromecast-poster:after{content:" ";display:block;height:2px;width:100px;background-color:#ccc;position:absolute;left:calc(50% - 50px)}.vjs-tech-chromecast .vjs-tech-chromecast-poster-img{max-height:180px;width:auto;border:2px solid #cccccc}.vjs-tech-chromecast .vjs-tech-chromecast-poster-img.vjs-tech-chromecast-poster-img-empty{width:160px;height:90px}.vjs-tech-chromecast .vjs-tech-chromecast-title-container{position:absolute;bottom:50%;margin-bottom:100px;color:#ccc;text-align:center}.vjs-tech-chromecast .vjs-tech-chromecast-title{font-size:22px}.vjs-tech-chromecast .vjs-tech-chromecast-title.vjs-tech-chromecast-title-empty{display:none}.vjs-tech-chromecast .vjs-tech-chromecast-subtitle{font-size:18px;padding-top:.5em}.vjs-tech-chromecast .vjs-tech-chromecast-subtitle.vjs-tech-chromecast-subtitle-empty{display:none}.video-js .vjs-control-bar .vjs-airplay-button,.video-js .vjs-control-bar .vjs-chromecast-button{width:47px}.video-js .vjs-control-bar .vjs-airplay-button .vjs-icon-placeholder,.video-js .vjs-control-bar .vjs-chromecast-button .vjs-icon-placeholder{display:inline-block} #json-categories-as-text { border: 1px solid #c6c6c6; color: var(--textareaForegroundColor); padding: 5px 15px; background-color: var(--markdownTextareaBackgroundColor); font-family: monospace; font-size: 13px; border-bottom: 0; border-radius: 3px 3px unset unset; width: 100%; } #json-categories-as-text.error { border-color: red; color: red; border-bottom: 1px solid; } #categories-table th { border-color: currentcolor; border-bottom: none; border: var(--submenuBackgroundColor); border-bottom: 1px solid var(--submenuBackgroundColor); padding: 5px; font-weight: 600; color: var(--mainForegroundColor); } #categories-table tr { outline: 0; background-color: var(--mainBackgroundColor); } #categories-table tbody tr:nth-child(odd) { background-color: var(--submenuBackgroundColor); } #categories-table td { padding: 5px; } #categories-table .category__deleted { text-decoration: line-through; color: red; } #categories-table .category__added { color: green; } .ncd-content { width: 100%; max-width: 1280px; margin: 0 auto; padding-top: 40px; margin-bottom: 40px; } .text-center { text-align: center; }@charset "UTF-8"; /* * SPDX-FileCopyrightText: 2024-2025 John Livingston * * SPDX-License-Identifier: AGPL-3.0-only */ /* * SPDX-FileCopyrightText: 2024-2025 John Livingston * * SPDX-License-Identifier: AGPL-3.0-only */ /* Here we are getting some Peertube variables (see _variables.scss in Peertube source code): */ /* * SPDX-FileCopyrightText: 2024-2025 John Livingston * * SPDX-License-Identifier: AGPL-3.0-only */ /* * SPDX-FileCopyrightText: 2024-2025 John Livingston * * SPDX-License-Identifier: AGPL-3.0-only */ .peertube-plugin-livechat-experimental, .peertube-plugin-livechat-warning { color: orange; } .peertube-plugin-livechat-error { color: red; } .peertube-plugin-livechat-error-message { /* display an error block (page not found, ...) */ display: block; font-size: 20px; padding-top: 50px; text-align: center; width: 100%; } .peertube-plugin-livechat-container .peertube-plugin-livechat-error-message { max-width: 30vw; } /* * SPDX-FileCopyrightText: 2024-2025 John Livingston * * SPDX-License-Identifier: AGPL-3.0-only */ /* * SPDX-FileCopyrightText: 2024-2025 John Livingston * * SPDX-License-Identifier: AGPL-3.0-only */ /* * SPDX-FileCopyrightText: 2024 Mehdi Benadel * SPDX-FileCopyrightText: 2024-2025 John Livingston * * SPDX-License-Identifier: AGPL-3.0-only */ /* We are disabling stylelint-disable custom-property-pattern so we can use Peertube var without warnings. */ /* stylelint-disable custom-property-pattern */ /* * SPDX-FileCopyrightText: 2024-2025 John Livingston * * SPDX-License-Identifier: AGPL-3.0-only */ /* * SPDX-FileCopyrightText: 2024 Mehdi Benadel * SPDX-FileCopyrightText: 2024-2025 John Livingston * * SPDX-License-Identifier: AGPL-3.0-only */ /* We are disabling stylelint-disable custom-property-pattern so we can use Peertube var without warnings. */ /* stylelint-disable custom-property-pattern */ /* * SPDX-FileCopyrightText: 2024 Mehdi Benadel * SPDX-FileCopyrightText: 2024-2025 John Livingston * * SPDX-License-Identifier: AGPL-3.0-only */ /* We are disabling stylelint-disable custom-property-pattern so we can use Peertube var without warnings. */ /* stylelint-disable custom-property-pattern */ livechat-dynamic-table-form { display: block; margin-bottom: 3rem; } livechat-dynamic-table-form table { table-layout: fixed; text-align: center; } livechat-dynamic-table-form table tr { border: 1px var(--bg-secondary-400, var(--greyBackgroundColor)) solid; } livechat-dynamic-table-form table td, livechat-dynamic-table-form table th { word-wrap: break-word; vertical-align: top; padding: 5px 7px; } livechat-dynamic-table-form table td:last-child { vertical-align: middle; min-width: 28px; } livechat-dynamic-table-form table td:last-child > input:not([type=checkbox]), livechat-dynamic-table-form table td:last-child textarea { min-width: 150px; } livechat-dynamic-table-form table tbody tr:nth-child(odd) { background-color: var(--bg-secondary-300, var(--greySecondaryBackgroundColor)); } livechat-dynamic-table-form table .livechat-dynamic-table-form-description-header { font-size: small; font-weight: lighter; } livechat-dynamic-table-form .dynamic-table-add-row-cell { text-align: left; } livechat-dynamic-table-form .dynamic-table-add-row { line-height: 19px; padding: 4px; border: 0; font-weight: 600; border-radius: 3px !important; text-align: center; cursor: pointer; font-size: 15px; background-color: var(--bs-green); } livechat-dynamic-table-form .dynamic-table-add-row, livechat-dynamic-table-form .dynamic-table-add-row:active, livechat-dynamic-table-form .dynamic-table-add-row:focus { color: #fff; background-color: rgb(63.7604651163, 228.1953488372, 12.3046511628); } livechat-dynamic-table-form .dynamic-table-add-row:focus, livechat-dynamic-table-form .dynamic-table-add-row.focus-visible { box-shadow: 0 0 0 0.2rem rgb(113.1674418605, 245.1255813953, 71.8744186047); } livechat-dynamic-table-form .dynamic-table-add-row:hover { color: #fff; background-color: rgb(75.688372093, 242.5162790698, 23.4837209302); } livechat-dynamic-table-form .dynamic-table-add-row[disabled], livechat-dynamic-table-form .dynamic-table-add-row.disabled { cursor: default; color: #fff; background-color: var(--input-border-color, var(--inputBorderColor)); } livechat-dynamic-table-form .dynamic-table-remove-row { line-height: 19px; padding: 4px; border: 0; font-weight: 600; border-radius: 3px !important; text-align: center; cursor: pointer; font-size: 15px; background-color: var(--bs-orange); } livechat-dynamic-table-form .dynamic-table-remove-row, livechat-dynamic-table-form .dynamic-table-remove-row:active, livechat-dynamic-table-form .dynamic-table-remove-row:focus { color: #fff; background-color: var(--primary, var(--mainColor)); } livechat-dynamic-table-form .dynamic-table-remove-row:focus, livechat-dynamic-table-form .dynamic-table-remove-row.focus-visible { box-shadow: 0 0 0 0.2rem var(--mainHoverColor); } livechat-dynamic-table-form .dynamic-table-remove-row:hover { color: #fff; background-color: var(--fg-400, var(--mainHoverColor)); } livechat-dynamic-table-form .dynamic-table-remove-row[disabled], livechat-dynamic-table-form .dynamic-table-remove-row.disabled { cursor: default; color: #fff; background-color: var(--input-border-color, var(--inputBorderColor)); } /* * SPDX-FileCopyrightText: 2024-2025 John Livingston * * SPDX-License-Identifier: AGPL-3.0-only */ /* * SPDX-FileCopyrightText: 2024-2025 John Livingston * * SPDX-License-Identifier: AGPL-3.0-only */ livechat-error { color: red; display: block; padding: 50px; text-align: center; } /* * SPDX-FileCopyrightText: 2024-2025 John Livingston * * SPDX-License-Identifier: AGPL-3.0-only */ livechat-help-button a { height: 18px !important; margin: 2px !important; padding: 1px !important; vertical-align: middle; } livechat-help-button svg { display: block; height: auto; } /* * SPDX-FileCopyrightText: 2024 Mehdi Benadel * SPDX-FileCopyrightText: 2024-2025 John Livingston * * SPDX-License-Identifier: AGPL-3.0-only */ /* stylelint-disable custom-property-pattern */ livechat-image-file-input img { cursor: pointer; max-height: 3em !important; } /* * SPDX-FileCopyrightText: 2024-2025 John Livingston * * SPDX-License-Identifier: AGPL-3.0-only */ livechat-share-chat { display: block; text-align: start; } livechat-share-chat > * { margin-top: 10px; } livechat-share-chat .sub-menu-entry { cursor: pointer; } livechat-share-chat .livechat-shareurl-copy { display: flex; flex-wrap: wrap; } livechat-share-chat .livechat-shareurl-copy button { white-space: nowrap; } livechat-share-chat .livechat-shareurl-copy input { flex-grow: 2; width: auto !important; } livechat-share-chat .livechat-shareurl-block { height: 300px; overflow-y: scroll; } livechat-share-chat .livechat-shareurl-options input[type=checkbox], livechat-share-chat .livechat-shareurl-options input[type=radio] { margin-right: 20px; } livechat-share-chat .livechat-shareurl-options label { display: block; } livechat-share-chat .livechat-shareurl-options .livechat-shareurl-suboptions { margin-left: 40px; } livechat-share-chat .livechat-shareurl-options .livechat-shareurl-suboptions > * { display: block; } livechat-share-chat .livechat-shareurl-options .livechat-shareurl-suboptions.livechat-shareurl-suboptions-disabled label { /* stylelint-disable-next-line custom-property-pattern */ color: var(--fg-400, var(--greyForegroundColor)); } livechat-share-chat .livechat-shareurl-protocol { display: flex; flex-flow: row wrap; column-gap: 30px; } livechat-share-chat .livechat-shareurl-protocol input[type=radio] { margin-right: 10px; } livechat-share-chat .livechat-shareurl-tips { margin-bottom: 1rem; margin-top: 1rem; } /* * SPDX-FileCopyrightText: 2024-2025 John Livingston * * SPDX-License-Identifier: AGPL-3.0-only */ livechat-spinner, .livechat-spinner { display: flex; flex-direction: row; justify-content: center; } livechat-spinner div, .livechat-spinner div { width: 48px; height: 48px; margin: 20px; /* stylelint-disable-next-line custom-property-pattern */ border: 5px solid var(--bg-secondary-400, var(--greyBackgroundColor)) !important; /* stylelint-disable-next-line custom-property-pattern */ border-bottom-color: var(--primary, var(--mainColor)) !important; border-radius: 50%; display: inline-block; box-sizing: border-box; animation: livechatrotating 1s linear infinite; } @keyframes livechatrotating { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* * SPDX-FileCopyrightText: 2024 Mehdi Benadel * SPDX-FileCopyrightText: 2024-2025 John Livingston * * SPDX-License-Identifier: AGPL-3.0-only */ /* stylelint-disable custom-property-pattern */ livechat-tags-input { --tag-padding-vertical: 3px; --tag-padding-horizontal: 6px; display: flex; align-items: flex-start; flex-wrap: wrap; max-width: 320px; /* stylelint-disable-next-line no-descending-specificity */ } livechat-tags-input .livechat-tags-container { align-items: center; display: flex; flex-flow: row; justify-content: space-between; } livechat-tags-input input { flex: 1; border: none; padding: 0; color: inherit; background-color: inherit; width: 100%; /* stylelint-disable-next-line no-descending-specificity */ } livechat-tags-input input:focus { outline: transparent; } livechat-tags-input .livechat-tags, livechat-tags-input .livechat-tags-searched { display: flex; flex-wrap: wrap; padding: 0; margin: var(--tag-padding-vertical) 0; max-height: 150px; overflow-y: auto; transition-property: height, margin; transition-duration: 0.3s; } @supports (scrollbar-width: auto) { livechat-tags-input .livechat-tags, livechat-tags-input .livechat-tags-searched { scrollbar-color: var(--fg-400, var(--greyForegroundColor)) transparent; scrollbar-width: thin; } } livechat-tags-input .livechat-tags-container, livechat-tags-input .livechat-tags-searched { border-bottom: 1px dashed var(--fg-400, var(--greyForegroundColor)); } livechat-tags-input .livechat-tags-container.livechat-empty, livechat-tags-input .livechat-tags-searched.livechat-empty { height: 0; margin: 0; border: none; } livechat-tags-input .livechat-tags-searched::after { content: "🔍"; flex-grow: 1; text-align: right; } livechat-tags-input .livechat-tags-searched.livechat-empty::after { display: none; } livechat-tags-input .livechat-tag, livechat-tags-input .livechat-tag-searched { width: auto; height: 24px; display: flex; align-items: center; justify-content: center; color: #fff; padding: 0 var(--tag-padding-horizontal); font-size: 14px; list-style: none; border-radius: 3px; margin: 0 3px 3px 0; transition: 0.3s filter; } livechat-tags-input .livechat-tag .livechat-tag-close, livechat-tags-input .livechat-tag-searched .livechat-tag-close { display: block; width: 12px; height: 12px; line-height: 12px; text-align: center; font-size: 10px; margin-left: var(--tag-padding-horizontal); color: var(--primary, var(--mainColor)); border-radius: 50%; background: #fff; cursor: pointer; } livechat-tags-input .livechat-tag .livechat-tag-close::before, livechat-tags-input .livechat-tag-searched .livechat-tag-close::before { content: "✕"; } livechat-tags-input .livechat-tag, livechat-tags-input .livechat-tag:active, livechat-tags-input .livechat-tag:focus, livechat-tags-input .livechat-tag-searched, livechat-tags-input .livechat-tag-searched:active, livechat-tags-input .livechat-tag-searched:focus { color: #fff; background-color: var(--primary, var(--mainColor)); } livechat-tags-input .livechat-tag .livechat-tag-close, livechat-tags-input .livechat-tag:active .livechat-tag-close, livechat-tags-input .livechat-tag:focus .livechat-tag-close, livechat-tags-input .livechat-tag-searched .livechat-tag-close, livechat-tags-input .livechat-tag-searched:active .livechat-tag-close, livechat-tags-input .livechat-tag-searched:focus .livechat-tag-close { color: var(--primary, var(--mainColor)); } livechat-tags-input .livechat-tag:hover, livechat-tags-input .livechat-tag-searched:hover { color: #fff; background-color: var(--fg-400, var(--mainHoverColor)); } livechat-tags-input .livechat-tag:hover .livechat-tag-close, livechat-tags-input .livechat-tag-searched:hover .livechat-tag-close { color: var(--fg-400, var(--mainHoverColor)); } livechat-tags-input .livechat-tag[disabled], livechat-tags-input .livechat-tag.disabled, livechat-tags-input .livechat-tag-searched[disabled], livechat-tags-input .livechat-tag-searched.disabled { cursor: default; color: #fff; background-color: var(--input-border-color, var(--inputBorderColor)); } livechat-tags-input .livechat-tag[disabled] .livechat-tag-close, livechat-tags-input .livechat-tag.disabled .livechat-tag-close, livechat-tags-input .livechat-tag-searched[disabled] .livechat-tag-close, livechat-tags-input .livechat-tag-searched.disabled .livechat-tag-close { color: var(--input-border-color, var(--inputBorderColor)); } livechat-tags-input .livechat-tag .livechat-tag-name, livechat-tags-input .livechat-tag-searched .livechat-tag-name { margin-top: 3px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 250px; } livechat-tags-input .livechat-tags.livechat-unfocused .livechat-tag { filter: opacity(50%) grayscale(80%); } /* * SPDX-FileCopyrightText: 2024 Mehdi Benadel * SPDX-FileCopyrightText: 2024-2025 John Livingston * * SPDX-License-Identifier: AGPL-3.0-only */ /* We are disabling stylelint-disable custom-property-pattern so we can use Peertube var without warnings. */ /* stylelint-disable custom-property-pattern */ /* * SPDX-FileCopyrightText: 2024-2025 John Livingston * * SPDX-License-Identifier: AGPL-3.0-only */ livechat-token-list table { width: 100%; table-layout: fixed; text-align: center; } livechat-token-list table tr { border: 1px var(--bg-secondary-400, var(--greyBackgroundColor)) solid; } livechat-token-list table td, livechat-token-list table th { word-wrap: break-word; vertical-align: top; padding: 5px 7px; } livechat-token-list table td:last-child { vertical-align: middle; min-width: 28px; } livechat-token-list table td:last-child > input:not([type=checkbox]), livechat-token-list table td:last-child textarea { min-width: 150px; } livechat-token-list table tbody tr:nth-child(odd) { background-color: var(--bg-secondary-300, var(--greySecondaryBackgroundColor)); } livechat-token-list table tr th:first-child, livechat-token-list table tr th:last-child { width: 50px; } livechat-token-list table label { font-weight: inherit; } livechat-token-list .livechat-create-token { line-height: 19px; padding: 4px; border: 0; font-weight: 600; border-radius: 3px !important; text-align: center; cursor: pointer; font-size: 15px; background-color: var(--bs-green); } livechat-token-list .livechat-create-token, livechat-token-list .livechat-create-token:active, livechat-token-list .livechat-create-token:focus { color: #fff; background-color: rgb(63.7604651163, 228.1953488372, 12.3046511628); } livechat-token-list .livechat-create-token:focus, livechat-token-list .livechat-create-token.focus-visible { box-shadow: 0 0 0 0.2rem rgb(113.1674418605, 245.1255813953, 71.8744186047); } livechat-token-list .livechat-create-token:hover { color: #fff; background-color: rgb(75.688372093, 242.5162790698, 23.4837209302); } livechat-token-list .livechat-create-token[disabled], livechat-token-list .livechat-create-token.disabled { cursor: default; color: #fff; background-color: var(--input-border-color, var(--inputBorderColor)); } livechat-token-list .livechat-revoke-token { line-height: 19px; padding: 4px; border: 0; font-weight: 600; border-radius: 3px !important; text-align: center; cursor: pointer; font-size: 15px; background-color: var(--bs-orange); } livechat-token-list .livechat-revoke-token, livechat-token-list .livechat-revoke-token:active, livechat-token-list .livechat-revoke-token:focus { color: #fff; background-color: var(--primary, var(--mainColor)); } livechat-token-list .livechat-revoke-token:focus, livechat-token-list .livechat-revoke-token.focus-visible { box-shadow: 0 0 0 0.2rem var(--mainHoverColor); } livechat-token-list .livechat-revoke-token:hover { color: #fff; background-color: var(--fg-400, var(--mainHoverColor)); } livechat-token-list .livechat-revoke-token[disabled], livechat-token-list .livechat-revoke-token.disabled { cursor: default; color: #fff; background-color: var(--input-border-color, var(--inputBorderColor)); } /* * SPDX-FileCopyrightText: 2024-2025 John Livingston * * SPDX-License-Identifier: AGPL-3.0-only */ /* * SPDX-FileCopyrightText: 2024-2025 John Livingston * * SPDX-License-Identifier: AGPL-3.0-only */ #peertube-plugin-livechat-container { display: flex; flex-direction: column; height: 100%; } #peertube-plugin-livechat-container .chatroom .box-flyout .chatroom-body .occupants { min-width: min(200px, 50%); } /* Note: livechat-viewer-mode-content (the form where anonymous users can choose nickname or log in with external account), can be something like ~180px height (at time of writing). We must ensure that the px height limit for converse-muc and converse-root is always higher than livechat-viewer-mode-content max size. Note: We also must ensure that when the user has choosen its nickname, and there is an ongoing poll, the user can see the chat when the poll is folded. */ #peertube-plugin-livechat-container converse-root { display: block; border: 1px solid black; min-height: max(30vh, 300px); height: 100%; min-width: min(400px, 25vw); } #peertube-plugin-livechat-container converse-root converse-muc { min-height: max(30vh, 300px); } @media screen and (orientation: portrait) and (width <= 767px) { #peertube-plugin-livechat-container converse-root { /* On small screen, and when portrait mode, we are giving the chat more vertical space. It should go under the video. */ min-height: max(58vh, 300px); } #peertube-plugin-livechat-container converse-root converse-muc { min-height: max(58vh, 300px); } } /* Media query for desktops */ @media only screen and (min-width: 1280px) { #peertube-plugin-livechat-container converse-root converse-muc { height: inherit; /* Full desktop experience */ } } /* custom toolbar CSS */ .send-button { border-radius: 0.25rem !important; } .send-button:hover { background-color: #0067c1 !important; } /* * SPDX-FileCopyrightText: 2024-2025 John Livingston * * SPDX-License-Identifier: AGPL-3.0-only */ .peertube-plugin-livechat-buttons, .livechat-mini-muc-bar-buttons { align-items: center; display: flex; flex-flow: row nowrap; justify-content: flex-end; padding-right: 12px !important; } .peertube-plugin-livechat-button { align-items: center; display: flex; flex-direction: row; height: 36px !important; margin: 5px !important; padding: 2px !important; } .peertube-plugin-livechat-button svg { height: auto; } .peertube-plugin-livechat-buttons-open .peertube-plugin-livechat-button, .livechat-mini-muc-bar-buttons .peertube-plugin-livechat-button { height: 18px !important; margin: 2px !important; padding: 1px !important; } .peertube-plugin-livechat-buttons-cloned { display: none; } [peertube-plugin-livechat-state=initializing] { display: none; } [peertube-plugin-livechat-state=open] .peertube-plugin-livechat-button-open { display: none; } [peertube-plugin-livechat-state=closed] .peertube-plugin-livechat-button-promote, [peertube-plugin-livechat-state=closed] .peertube-plugin-livechat-button-close { display: none; } [peertube-plugin-livechat-state]:not([peertube-plugin-livechat-state=open]) .peertube-plugin-livechat-multi-button-main { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; margin-right: 0 !important; } [peertube-plugin-livechat-state]:not([peertube-plugin-livechat-state=open]) .peertube-plugin-livechat-multi-button-secondary { border-radius: 0 !important; margin-right: 0 !important; margin-left: 0 !important; border-left: 1px solid currentcolor; } [peertube-plugin-livechat-state]:not([peertube-plugin-livechat-state=open]) .peertube-plugin-livechat-multi-button-last-secondary { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; margin-left: 0 !important; border-left: 1px solid currentcolor; } /* * SPDX-FileCopyrightText: 2024-2025 John Livingston * * SPDX-License-Identifier: AGPL-3.0-only */ /* stylelint-disable custom-property-pattern */ /* * SPDX-FileCopyrightText: 2024-2025 John Livingston * * SPDX-License-Identifier: AGPL-3.0-only */ /* * SPDX-FileCopyrightText: 2024-2025 John Livingston * * SPDX-License-Identifier: AGPL-3.0-only */ /* * SPDX-FileCopyrightText: 2024-2025 John Livingston * * SPDX-License-Identifier: AGPL-3.0-only */ livechat-channel-tabs { display: block; /* See Peertube sub-menu-h1 mixin */ margin-bottom: 30px; } /* * SPDX-FileCopyrightText: 2024-2025 John Livingston * * SPDX-License-Identifier: AGPL-3.0-only */ /* stylelint-disable custom-property-pattern */ livechat-configuration-section-header { margin-top: 3rem; } /* * SPDX-FileCopyrightText: 2024-2025 John Livingston * * SPDX-License-Identifier: AGPL-3.0-only */ /* These are styles to apply for the channel configuration pages. */ .peertube-plugin-livechat-configuration { /* Channel configuration page */ /* Channel selection page */ } .peertube-plugin-livechat-configuration h1 { padding-top: 40px; /* See Peertube sub-menu-h1 mixin */ font-size: 1.3rem; border-bottom: 2px solid var(--bg-secondary-400, var(--greyBackgroundColor)); padding-bottom: 15px; } .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-configuration-channel-info { /* stylelint-disable-next-line value-keyword-case */ color: var(--fg, var(--mainForegroundColor)); } .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-configuration-channel-info span:first-child { /* See Peertube .video-channel-display-name */ font-weight: 600; font-size: 18px; } .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-configuration-channel-info span:not(:first-child) { /* See Peertube .video-channel-name */ margin-left: 5px; font-size: 14px; color: #777272; } .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel h2 { text-transform: uppercase; color: var(--primary, var(--mainColor)); font-weight: 700; font-size: 1rem; margin-bottom: 10px; } .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=submit], .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=reset], .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=submit], .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=reset], .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-configuration-actions button, .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-tags-input-copy { line-height: 19px; padding: 4px 13px; border: 0; font-weight: 600; border-radius: 3px !important; text-align: center; cursor: pointer; font-size: 15px; } .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=submit], .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=submit]:active, .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=submit]:focus, .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=submit], .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=submit]:active, .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=submit]:focus, .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-configuration-actions button, .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-configuration-actions button:active, .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-configuration-actions button:focus, .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-tags-input-copy, .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-tags-input-copy:active, .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-tags-input-copy:focus { color: #fff; background-color: var(--primary, var(--mainColor)); } .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=submit]:hover, .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=submit]:hover, .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-configuration-actions button:hover, .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-tags-input-copy:hover { color: #fff; background-color: var(--fg-400, var(--mainHoverColor)); } .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=submit][disabled], .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=submit].disabled, .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=submit][disabled], .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=submit].disabled, .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-configuration-actions button[disabled], .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-configuration-actions button.disabled, .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-tags-input-copy[disabled], .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-tags-input-copy.disabled { cursor: default; color: #fff; background-color: var(--input-border-color, var(--inputBorderColor)); } .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=reset], .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=reset] { background-color: var(--bg-secondary-400, var(--greyBackgroundColor)); color: var(--fg-400, var(--greyForegroundColor)); } .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=reset]:hover, .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=reset]:active, .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=reset]:focus, .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=reset][disabled], .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=reset].disabled, .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=reset]:hover, .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=reset]:active, .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=reset]:focus, .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=reset][disabled], .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=reset].disabled { color: var(--fg-400, var(--greyForegroundColor)); background-color: var(--bg-secondary-300, var(--greySecondaryBackgroundColor)); } .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=reset][disabled], .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=reset].disabled, .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=reset][disabled], .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=reset].disabled { cursor: default; } .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels { list-style-type: none; } .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li { align-items: center; gap: 15px; /* See Peertube row-blocks mixin, used in video-channel */ display: flex; min-height: 130px; padding-bottom: 20px; margin-bottom: 20px; /* stylelint-disable-next-line value-keyword-case */ border-bottom: 1px solid var(--inputBorderColor); } @media screen and (max-width: 800px) { .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li { flex-direction: column; height: auto; align-items: center; } } .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li .avatar { /* See Peertube CSS, class avatar and avatar-80 */ width: 80px; height: 80px; min-width: 80px; min-height: 80px; } .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li .avatar.channel { border-radius: 5px; } .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li .avatar.initial { /* See Peertube actor-avatar.component.scss */ background-color: #3c2109; color: #fff; display: flex; align-items: center; justify-content: center; font-size: var(--initialFontSize); } .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li .avatar.initial.gray { background-color: #939393; } .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li .peertube-plugin-livechat-configuration-home-info { flex-grow: 1; } .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li .peertube-plugin-livechat-configuration-home-info a { /* See Peertube .video-channel-names */ width: fit-content; display: flex; align-items: baseline; /* stylelint-disable-next-line value-keyword-case */ color: var(--fg, var(--mainForegroundColor)); } .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li .peertube-plugin-livechat-configuration-home-info a:hover, .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li .peertube-plugin-livechat-configuration-home-info a:focus, .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li .peertube-plugin-livechat-configuration-home-info a:active { text-decoration: none !important; } .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li .peertube-plugin-livechat-configuration-home-info a:focus:not(.focus-visible) { outline: none !important; } .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li .peertube-plugin-livechat-configuration-home-info a div:first-child { /* See Peertube .video-channel-display-name */ font-weight: 600; font-size: 18px; } .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li .peertube-plugin-livechat-configuration-home-info a div:not(:first-child) { /* See Peertube .video-channel-name */ margin-left: 5px; font-size: 14px; color: #777272; } .peertube-plugin-livechat-configuration .peertube-livechat-emojis-col-sn { width: 30%; } .peertube-plugin-livechat-configuration .peertube-livechat-emojis-col-file { width: 65%; } .peertube-plugin-livechat-configuration .peertube-plugin-livechat-configuration-actions { margin-bottom: 1rem; text-align: right; } /* * SPDX-FileCopyrightText: 2024-2025 John Livingston * * SPDX-License-Identifier: AGPL-3.0-only */ /* * SPDX-FileCopyrightText: 2024-2025 John Livingston * * SPDX-License-Identifier: AGPL-3.0-only */ /* stylelint-disable custom-property-pattern */ .peertube-plugin-livechat-admin-firewall h1 { padding-top: 40px; /* See Peertube sub-menu-h1 mixin */ font-size: 1.3rem; border-bottom: 2px solid var(--bg-secondary-400, var(--greyBackgroundColor)); padding-bottom: 15px; } .peertube-plugin-livechat-admin-firewall textarea[name^=_content_] { min-height: 10rem; } .peertube-plugin-livechat-admin-firewall input[type=submit], .peertube-plugin-livechat-admin-firewall input[type=reset], .peertube-plugin-livechat-admin-firewall button[type=submit], .peertube-plugin-livechat-admin-firewall button[type=reset] { line-height: 19px; padding: 4px 13px; border: 0; font-weight: 600; border-radius: 3px !important; text-align: center; cursor: pointer; font-size: 15px; } .peertube-plugin-livechat-admin-firewall input[type=submit], .peertube-plugin-livechat-admin-firewall input[type=submit]:active, .peertube-plugin-livechat-admin-firewall input[type=submit].active, .peertube-plugin-livechat-admin-firewall input[type=submit]:focus, .peertube-plugin-livechat-admin-firewall button[type=submit], .peertube-plugin-livechat-admin-firewall button[type=submit]:active, .peertube-plugin-livechat-admin-firewall button[type=submit].active, .peertube-plugin-livechat-admin-firewall button[type=submit]:focus { color: var(--on-primary, #fff); background-color: var(--primary, var(--mainColor)); border: 1px solid var(--primary, var(--mainColor)); } .peertube-plugin-livechat-admin-firewall input[type=submit]:hover, .peertube-plugin-livechat-admin-firewall button[type=submit]:hover { color: var(--on-primary, #fff); background-color: var(--primary-400, var(--mainHoverColor)); } .peertube-plugin-livechat-admin-firewall input[type=submit][disabled], .peertube-plugin-livechat-admin-firewall button[type=submit][disabled] { pointer-events: none; opacity: 0.6; } .peertube-plugin-livechat-admin-firewall input[type=reset], .peertube-plugin-livechat-admin-firewall button[type=reset] { color: var(--fg, var(--mainForegroundColor)); background-color: transparent; border: 1px solid var(--bg-secondary-500, var(--inputBorderColor)) !important; } .peertube-plugin-livechat-admin-firewall input[type=reset]:active, .peertube-plugin-livechat-admin-firewall input[type=reset].active, .peertube-plugin-livechat-admin-firewall input[type=reset]:focus, .peertube-plugin-livechat-admin-firewall input[type=reset]:focus-visible, .peertube-plugin-livechat-admin-firewall button[type=reset]:active, .peertube-plugin-livechat-admin-firewall button[type=reset].active, .peertube-plugin-livechat-admin-firewall button[type=reset]:focus, .peertube-plugin-livechat-admin-firewall button[type=reset]:focus-visible { color: var(--fg, var(--mainForegroundColor)); background-color: var(--bg-secondary-500, var(--inputBorderColor)); border-color: var(--bg-secondary-500, var(--inputBorderColor)); } .peertube-plugin-livechat-admin-firewall input[type=reset]:hover, .peertube-plugin-livechat-admin-firewall button[type=reset]:hover { color: var(--fg, var(--mainForegroundColor)); background-color: var(--bg-secondary-450, var(--inputBorderColor)); } .peertube-plugin-livechat-admin-firewall input[type=reset][disabled], .peertube-plugin-livechat-admin-firewall button[type=reset][disabled] { pointer-events: none; opacity: 0.8; } .peertube-plugin-livechat-admin-firewall .peertube-livechat-admin-firewall-col-name { width: 25%; } .peertube-plugin-livechat-admin-firewall .peertube-livechat-admin-firewall-col-content { width: 65%; } /* * SPDX-FileCopyrightText: 2024-2025 John Livingston * * SPDX-License-Identifier: AGPL-3.0-only */ table.peertube-plugin-livechat-prosody-list-rooms { border: 1px solid black; margin: 5px 0; } table.peertube-plugin-livechat-prosody-list-rooms tr:nth-child(odd) { background-color: #eee; } table.peertube-plugin-livechat-prosody-list-rooms tr:nth-child(even) { background-color: #fff; } table.peertube-plugin-livechat-prosody-list-rooms th { /* stylelint-disable-next-line custom-property-pattern */ background-color: var(--fg-400, var(--mainHoverColor)); border: 1px solid black; /* stylelint-disable-next-line custom-property-pattern */ color: var(--mainBackgroundColor); padding: 4px 5px; } table.peertube-plugin-livechat-prosody-list-rooms td { border: 1px solid #555; color: black; padding: 4px 5px; } /*# sourceMappingURL=style.css.map */ /** User donation table styles */ /* cyrillic-ext */ @font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v18/UcCm3FwrK3iLTcvnUwkT9nA2.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v18/UcCm3FwrK3iLTcvnUwAT9nA2.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek-ext */ @font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v18/UcCm3FwrK3iLTcvnUwgT9nA2.woff2) format("woff2"); unicode-range: U+1F00-1FFF; } /* greek */ @font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v18/UcCm3FwrK3iLTcvnUwcT9nA2.woff2) format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } /* vietnamese */ @font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v18/UcCm3FwrK3iLTcvnUwsT9nA2.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v18/UcCm3FwrK3iLTcvnUwoT9nA2.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v18/UcCm3FwrK3iLTcvnUwQT9g.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v18/UcCo3FwrK3iLTcvvYwYL8g.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v18/UcCo3FwrK3iLTcvmYwYL8g.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek-ext */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v18/UcCo3FwrK3iLTcvuYwYL8g.woff2) format("woff2"); unicode-range: U+1F00-1FFF; } /* greek */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v18/UcCo3FwrK3iLTcvhYwYL8g.woff2) format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } /* vietnamese */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v18/UcCo3FwrK3iLTcvtYwYL8g.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v18/UcCo3FwrK3iLTcvsYwYL8g.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v18/UcCo3FwrK3iLTcviYwY.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin */ @font-face { font-family: "Orbitron"; font-style: normal; font-weight: 400 900; font-display: swap; src: url(https://fonts.gstatic.com/s/orbitron/v31/yMJRMIlzdpvBhQQL_Qq7dy0.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --message-font-size: 0.85rem; --message-color: white; --donor-font-size: 1.05rem; --donor-color: #ffffff; --amount-color: #4caf50; --amount-font-size: 1rem; --highlight-color: #00ffffff; --border-color: #00ffffff; --highlight-duration: 0.8s; --show-donor-name: "visible"; --show-donation-amount: "visible"; --show-message: "block"; --gibs-background-color: "rgba(10, 5, 20, 0.95)"; --gibs-max-width: "600px"; --gibs-max-height: "auto"; --nctv-blue-secondary: #0079b8ff; --nctv-blue-primary: #32abeaff; --nctv-blue-dark: #012741ff; --nctv-accent-orange: #f57200ff; --nctv-accent-orange-subtle: #d46400ff; --gibs-min-width: 250px; --gibs-min-height: "fit-content"; --neon-cyan: #00ffff; --neon-magenta: #ff00ff; --hot-pink: #ff1493; --neon-gold: #ffeb3b; --electric-purple: #8b5cf6; } .donation-goal-progress-wrapper { width: 100%; } .donation-goal-progress { position: relative; height: 28px; background-color: rgba(255, 255, 255, 0.1); border-radius: 14px; overflow: hidden; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3); } .donation-goal-progress-bar { height: 100%; border-radius: 14px; background: linear-gradient(90deg, rgba(0, 255, 255, 0.9) 0%, rgba(255, 0, 255, 0.9) 50%, rgba(0, 255, 255, 0.9) 100%); background-size: 200% 100%; animation: neon-progress-flow 2s linear infinite; transition: width 0.5s ease-out; box-shadow: 0 0 15px rgba(0, 255, 255, 0.5), 0 0 30px rgba(255, 0, 255, 0.2); } .donation-goal-progress-bar.funded { background: linear-gradient(90deg, rgba(255, 235, 59, 0.95) 0%, rgba(255, 0, 255, 0.9) 25%, rgba(0, 255, 255, 0.9) 50%, rgba(255, 0, 255, 0.9) 75%, rgba(255, 235, 59, 0.95) 100%); background-size: 200% 100%; animation: neon-progress-flow 1.5s linear infinite; box-shadow: 0 0 20px rgba(255, 235, 59, 0.6), 0 0 40px rgba(255, 0, 255, 0.3); } @keyframes neon-progress-flow { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } .donation-goal-progress-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: 700; font-size: 0.85rem; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); z-index: 1; } @keyframes progress-stripe-animation { 0% { background-position: 0 0; } 100% { background-position: 20px 0; } } .goals-table-scroll { width: 100%; max-width: 100%; min-height: 200px; max-height: 300px; overflow: auto; border-radius: 0.375rem; position: relative; } .goal-drag-handle { cursor: grab; user-select: none; text-align: center; font-size: 1.1rem; color: #666; letter-spacing: 1px; padding: 0.6rem 0.5rem !important; width: 40px; transition: color 0.15s ease, background-color 0.15s ease; } .goal-drag-handle:hover { color: var(--nctv-blue-primary); background-color: rgba(50, 171, 234, 0.1); } .goal-drag-handle:active { cursor: grabbing; } .goal-row-ghost { opacity: 0.4; background-color: rgba(50, 171, 234, 0.15) !important; } .goal-row-chosen { background-color: rgba(50, 171, 234, 0.2) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); transform: scale(1.02); } #save-goals-order-btn { display: block; margin-top: 0.5rem; margin-left: auto; margin-bottom: 0.5rem; } #goal-history-section .goals-history-scroll { width: 100%; max-width: 100%; max-height: 250px; overflow: auto; border-radius: 0.375rem; } #goal-history-table { width: 100%; min-width: 400px; margin-bottom: 0; } #goal-history-table th, #goal-history-table td { vertical-align: middle; white-space: nowrap; padding: 0.5rem 0.75rem; } #goal-history-table th { position: sticky; top: 0; z-index: 1; } #goal-history-table th:nth-child(1), #goal-history-table td:nth-child(1) { min-width: 120px; white-space: normal; word-break: break-word; } #goals-table { width: 100%; min-width: 400px; margin-bottom: 0; } #goals-table th, #goals-table td { vertical-align: middle; white-space: nowrap; padding: 0.6rem 0.75rem; } #goals-table th { position: sticky; top: 0; z-index: 1; } #goals-table td:nth-child(2) { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #goals-table td:nth-child(3) { width: 25%; min-width: 120px; max-width: 200px; } #goals-table td:nth-child(3) .donation-goal-progress { height: 20px; border-radius: 10px; } #goals-table td:nth-child(3) .donation-goal-progress-bar { border-radius: 10px; } .nctv-stat-card { min-width: 150px; border-left: 3px solid var(--nctv-blue-primary); transition: transform 0.2s ease, box-shadow 0.2s ease; } .nctv-stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .nctv-stat-card .stat-value { font-size: 1.5rem; font-weight: 700; } .nctv-stat-card .stat-label { font-size: 0.85rem; opacity: 0.8; } .nctv-tier-card { border: 2px solid transparent; transition: all 0.2s ease; } .nctv-tier-card:hover { border-color: var(--nctv-blue-primary); transform: translateY(-3px); box-shadow: 0 6px 20px rgba(50, 171, 234, 0.2); } .nctv-tier-card.selected { border-color: var(--nctv-accent-orange); background: linear-gradient(135deg, rgba(245, 114, 0, 0.05), transparent); } .nctv-tier-card .tier-price { color: var(--amount-color); font-weight: 700; } .nctv-table { width: 100%; max-width: 100%; border-collapse: collapse; } .nctv-table th { background-color: var(--nctv-blue-dark); color: white; font-weight: 600; padding: 0.75rem; text-align: left; } .nctv-table td { padding: 0.75rem; border-bottom: 1px solid rgba(128, 128, 128, 0.2); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nctv-table tr:hover td { background-color: rgba(50, 171, 234, 0.05); } .nctv-table .amount-cell { color: var(--amount-color); font-weight: 600; } .nctv-table .truncate { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #donation-table-container, #users-table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; } #donation-table, #user-table { width: 100%; max-width: 100%; border-collapse: collapse; } #donation-table th, #user-table th { padding: 0.5rem 0.75rem; text-align: left; font-weight: 600; } #donation-table td, #user-table td { padding: 0.5rem 0.75rem; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .table-responsive { border-radius: 0.5rem; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .table { margin-bottom: 0; } .table .table-dark th, .table thead.table-dark th { background-color: var(--nctv-blue-dark); color: white; font-weight: 600; padding: 0.875rem 1rem; border: none; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.5px; } .table tbody td { padding: 0.875rem 1rem; vertical-align: middle; border-bottom: 1px solid rgba(128, 128, 128, 0.15); } .table tbody tr { transition: background-color 0.15s ease; } .table tbody tr:hover { background-color: rgba(50, 171, 234, 0.08) !important; } .table tbody tr:last-child td { border-bottom: none; } .table .text-success { color: var(--amount-color) !important; font-weight: 600; } .table .text-muted { opacity: 0.75; } .table .text-truncate { max-width: 200px; display: inline-block; } .table .badge { font-size: 0.7rem; font-weight: 600; padding: 0.2rem 0.4rem; letter-spacing: 0.3px; text-transform: uppercase; } .table .badge.bg-success { background-color: rgba(76, 175, 80, 0.9) !important; } .table .badge.bg-warning { background-color: rgba(245, 114, 0, 0.9) !important; color: white !important; } .table .badge.bg-secondary { background-color: rgba(128, 128, 128, 0.7) !important; } .table .badge.bg-danger { background-color: rgba(220, 53, 69, 0.9) !important; } .table .badge.bg-info { background-color: rgba(50, 171, 234, 0.9) !important; color: white !important; } .table .badge.bg-primary { background-color: var(--nctv-blue-primary) !important; } .table .btn-sm { padding: 0.25rem 0.6rem; font-size: 0.8rem; font-weight: 500; } .table .btn-danger { background-color: #dc3545; border-color: #dc3545; transition: all 0.2s ease; } .table .btn-danger:hover { background-color: #c82333; border-color: #bd2130; transform: translateY(-1px); } @media (max-width: 768px) { .table .table-dark th, .table thead.table-dark th { padding: 0.625rem 0.75rem; font-size: 0.75rem; } .table tbody td { padding: 0.625rem 0.75rem; font-size: 0.875rem; } .table .badge { font-size: 0.65rem; padding: 0.25rem 0.45rem; } .table .btn-sm { padding: 0.2rem 0.5rem; font-size: 0.75rem; } } .nctv-form-hint { font-size: 0.8rem; font-style: italic; opacity: 0.7; margin-top: 0.25rem; } #sound-upload-input { background-color: #1a1a1a; border: 1px solid rgba(255, 255, 255, 0.15); color: #e0e0e0; } #sound-upload-input::file-selector-button { background-color: #2a2a2a; border: none; border-right: 1px solid rgba(255, 255, 255, 0.15); color: #e0e0e0; padding: 0.375rem 0.75rem; margin-right: 0.75rem; transition: background-color 0.15s ease; } #sound-upload-input::file-selector-button:hover { background-color: #3a3a3a; } #sound-upload-input:focus { border-color: var(--nctv-blue-primary); box-shadow: 0 0 0 2px rgba(50, 171, 234, 0.2); outline: none; } #sound-upload-btn { background-color: var(--nctv-blue-secondary); border-color: var(--nctv-blue-secondary); color: #fff; } #sound-upload-btn:hover { background-color: var(--nctv-blue-primary); border-color: var(--nctv-blue-primary); } #sound-upload-btn:disabled { background-color: #444; border-color: #444; opacity: 0.7; } #custom-sounds-list .table { background-color: #1a1a1a; } #custom-sounds-list .table tbody tr { border-bottom: 1px solid rgba(255, 255, 255, 0.08); } #custom-sounds-list .table tbody tr:last-child { border-bottom: none; } #custom-sounds-list .table td { padding: 0.75rem 1rem; } #custom-sounds-list .sound-name-input { width: 180px; min-width: 180px; max-width: 180px; background-color: #252525; border: 1px solid rgba(255, 255, 255, 0.15); color: #e0e0e0; transition: border-color 0.15s ease, box-shadow 0.15s ease; } #custom-sounds-list .sound-name-input:focus { background-color: #2a2a2a; border-color: var(--nctv-blue-primary); box-shadow: 0 0 0 2px rgba(50, 171, 234, 0.2); outline: none; color: #fff; } #custom-sounds-list .save-name-btn { white-space: nowrap; } .nctv-pagination { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; } .nctv-pagination .page-info { font-size: 0.9rem; opacity: 0.8; margin: 0 0.5rem; } .nctv-btn-primary { background: linear-gradient(135deg, var(--nctv-blue-primary), var(--nctv-blue-secondary)); border: none; color: white; transition: all 0.2s ease; } .nctv-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(50, 171, 234, 0.3); } .nctv-btn-primary:active { transform: translateY(0); } .nctv-btn-accent { background: linear-gradient(135deg, var(--nctv-accent-orange), var(--nctv-accent-orange-subtle)); border: none; color: white; transition: all 0.2s ease; } .nctv-btn-accent:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(245, 114, 0, 0.3); } .nctv-status-badge { display: inline-flex; align-items: center; justify-content: center; padding: 0.2rem 0.6rem; border-radius: 0.5rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1; text-align: center; min-width: 4.5rem; color: #ffffff; } .nctv-status-badge.active { background-color: #16a34a; } .nctv-status-badge.funded { background-color: #fbbf24; color: #1a1a1a; animation: pulse-gold 2s ease-in-out infinite; } .nctv-status-badge.completed { background-color: #6b7280; } .nctv-status-badge.pending, .nctv-status-badge.incomplete { background-color: #2563eb; } .nctv-status-badge.canceling { background-color: #d97706; } .nctv-status-badge.past-due { background-color: #dc2626; } .nctv-status-badge.canceled, .nctv-status-badge.unpaid { background-color: #6b7280; } @keyframes pulse-gold { 0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.4); } 50% { box-shadow: 0 0 0 4px rgba(251, 191, 36, 0); } } .nctv-badge { padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .nctv-badge.active { background-color: rgba(76, 175, 80, 0.2); color: #4caf50; } .nctv-badge.pending { background-color: rgba(50, 171, 234, 0.2); color: var(--nctv-blue-primary); } .nctv-badge.canceled { background-color: rgba(128, 128, 128, 0.2); color: #888; } .nctv-badge.warning { background-color: rgba(245, 114, 0, 0.2); color: var(--nctv-accent-orange); } .nctv-link { color: var(--nctv-blue-primary); text-decoration: none; transition: color 0.2s ease; } .nctv-link:hover { color: var(--nctv-accent-orange); text-decoration: underline; } @media (max-width: 768px) { .nctv-stat-card { min-width: 120px; } .nctv-stat-card .stat-value { font-size: 1.25rem; } .nctv-table td, .nctv-table th { padding: 0.5rem; font-size: 0.9rem; } .nctv-hide-mobile { display: none !important; } } @media (max-width: 576px) { .nctv-stat-card { min-width: 100%; margin-bottom: 0.5rem; } } /** NCTV Gibs donation attention grabber */ .bounce { animation: bounce 2s ease infinite; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); } } #gibs-container { height: 100%; display: flex; position: absolute; width: 100%; flex-direction: column-reverse; row-gap: 0.5rem; padding: 0.75rem; overflow: hidden; align-items: flex-start; } .gib { background: var(--gibs-background-color, rgba(10, 5, 20, 0.95)); border-radius: 0.5rem; position: relative; overflow: hidden; flex-shrink: 0; border-left: 3px solid var(--border-color, #00ffff); box-shadow: 0 0 15px rgba(0, 255, 255, 0.2), 0 0 30px rgba(255, 0, 255, 0.08), 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05); animation: smoothPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; min-height: var(--gibs-min-height); min-width: var(--gibs-min-width); max-width: var(--gibs-max-width); max-height: var(--gibs-max-height); } .gib::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, var(--highlight-color, rgba(0, 255, 255, 0.3)) 0%, rgba(255, 0, 255, 0.1) 40%, transparent 70%); opacity: 0; animation: highlightFlash var(--highlight-duration, 0.8s) ease-out forwards; pointer-events: none; border-radius: 0.5rem; } .gib.donation.tier-standard { border-left-color: var(--border-color, #00ffff); box-shadow: 0 0 12px rgba(0, 255, 255, 0.15), 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05); } .gib.donation.tier-standard::before { background: linear-gradient(135deg, var(--highlight-color, rgba(0, 255, 255, 0.25)) 0%, transparent 60%); } .gib.donation.tier-middle { border-left-color: var(--middle-tier-border-color, #ff1493); border-left-width: 4px; box-shadow: 0 0 18px var(--middle-tier-glow-color, rgba(255, 20, 147, 0.35)), 0 0 35px rgba(255, 0, 255, 0.1), 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 150, 200, 0.1); } .gib.donation.tier-middle::before { background: linear-gradient(135deg, var(--middle-tier-highlight-color, rgba(255, 20, 147, 0.3)) 0%, rgba(255, 0, 255, 0.1) 40%, transparent 70%); animation: highlightFlash 1s ease-out forwards; } .gib.donation.tier-middle .donor-name { text-shadow: 0 0 10px var(--middle-tier-glow-color, rgba(255, 20, 147, 0.6)), 0 0 20px rgba(255, 0, 255, 0.2); } .gib.donation.tier-middle .donor-amount { color: var(--middle-tier-border-color, #ff1493); text-shadow: 0 0 10px var(--middle-tier-border-color, #ff1493), 0 0 20px var(--middle-tier-glow-color, rgba(255, 20, 147, 0.5)); } .gib.donation.tier-high { border-left-color: var(--high-tier-border-color, #ffeb3b); border-left-width: 5px; box-shadow: 0 0 20px var(--high-tier-glow-color, rgba(255, 235, 59, 0.4)), 0 0 40px rgba(255, 0, 255, 0.15), 0 6px 25px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 235, 59, 0.15); animation: smoothPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, neonPulse 2s ease-in-out infinite 0.5s; } .gib.donation.tier-high::before { background: linear-gradient(135deg, var(--high-tier-highlight-color, rgba(255, 235, 59, 0.35)) 0%, rgba(255, 0, 255, 0.15) 40%, transparent 70%); animation: highlightFlash 1.2s ease-out forwards; } .gib.donation.tier-high .donor-name { text-shadow: 0 0 12px var(--high-tier-glow-color, rgba(255, 235, 59, 0.7)), 0 0 25px rgba(255, 0, 255, 0.2); } .gib.donation.tier-high .donor-amount { font-family: "Montserrat", sans-serif; font-weight: 800; color: var(--high-tier-border-color, #ffeb3b); text-shadow: 0 0 12px var(--high-tier-border-color, #ffeb3b), 0 0 25px var(--high-tier-glow-color, rgba(255, 235, 59, 0.6)), 0 0 40px rgba(255, 0, 255, 0.2); } @keyframes neonPulse { 0%, 100% { box-shadow: 0 0 20px var(--high-tier-glow-color, rgba(255, 235, 59, 0.4)), 0 0 40px rgba(255, 0, 255, 0.15), 0 6px 25px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 235, 59, 0.15); } 50% { box-shadow: 0 0 30px var(--high-tier-glow-color, rgba(255, 235, 59, 0.55)), 0 0 55px rgba(255, 0, 255, 0.25), 0 6px 25px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 235, 59, 0.2); } } .gib.subscription { border-left-color: var(--border-color, #8b5cf6); border-left-width: 4px; box-shadow: 0 0 18px rgba(139, 92, 246, 0.3), 0 0 35px rgba(0, 255, 255, 0.1), 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(200, 180, 255, 0.1); } .gib.subscription::before { background: linear-gradient(135deg, rgba(139, 92, 246, 0.35) 0%, rgba(0, 255, 255, 0.15) 50%, transparent 80%); } .gib.subscription .donor-name { text-shadow: 0 0 10px rgba(0, 255, 255, 0.6), 0 0 20px rgba(139, 92, 246, 0.3); } .gib.subscription .donor-amount { text-shadow: 0 0 10px rgba(139, 92, 246, 0.6), 0 0 20px rgba(0, 255, 255, 0.3); } .gib.subscription::after { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent 0%, var(--shimmer-color-1, rgba(139, 92, 246, 0.4)) 20%, var(--shimmer-color-2, rgba(0, 255, 255, 0.5)) 50%, var(--shimmer-color-1, rgba(139, 92, 246, 0.4)) 80%, transparent 100%); animation: neonShimmer var(--shimmer-duration, 2500ms) ease-in-out infinite; pointer-events: none; z-index: 5; } .gib.subscription.shimmer-disabled::after { display: none; } @keyframes neonShimmer { 0% { left: -100%; opacity: 0.8; } 50% { opacity: 1; } 100% { left: 100%; opacity: 0.8; } } .donation-info-container { display: flex; text-align: center; font-size: 1.05rem; align-items: center; justify-content: space-between; padding: 0.25rem 0; } .donor-name { color: var(--donor-color); visibility: var(--show-donor-name); font-size: var(--donor-font-size); font-family: "Montserrat", "Inter", sans-serif; font-weight: 700; margin-left: 1rem; margin-top: 0.5rem; letter-spacing: 0.5px; text-shadow: 0 0 8px rgba(0, 255, 255, 0.6), 0 0 15px rgba(0, 255, 255, 0.3), 0 1px 3px rgba(0, 0, 0, 0.6); } .donor-amount { color: var(--amount-color); font-family: "Montserrat", "Inter", sans-serif; font-size: calc(var(--amount-font-size) * 1.1); visibility: var(--show-donation-amount); font-weight: 800; margin-right: 1rem; margin-top: 0.5rem; display: var(--amount-display); letter-spacing: 1px; text-shadow: 0 0 10px currentColor, 0 0 20px rgba(0, 255, 255, 0.2), 0 1px 3px rgba(0, 0, 0, 0.7); } .donor-message-container { position: relative; margin-top: 0.5rem; padding-top: 0.5rem; } .donor-message-container::before { content: ""; position: absolute; top: 0; left: 1rem; right: 1rem; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(0, 255, 255, 0.2) 15%, rgba(255, 0, 255, 0.25) 50%, rgba(0, 255, 255, 0.2) 85%, transparent 100%); box-shadow: 0 0 4px rgba(0, 255, 255, 0.15); } .donor-media-container { position: relative; margin: 0.5rem 1rem 0.25rem; max-width: 100%; border-radius: 0.5rem; overflow: hidden; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.1); animation: mediaFadeIn 0.3s ease-out forwards; } .donor-media { display: block; max-width: 100%; max-height: 300px; width: auto; height: auto; object-fit: contain; margin: 0 auto; border-radius: 0.25rem; } .gib.donation.tier-middle .donor-media-container { border-color: var(--middle-tier-glow-color, rgba(245, 114, 0, 0.3)); box-shadow: 0 0 10px var(--middle-tier-glow-color, rgba(245, 114, 0, 0.15)); } .gib.donation.tier-high .donor-media-container { border-color: var(--high-tier-glow-color, rgba(255, 215, 0, 0.4)); box-shadow: 0 0 15px var(--high-tier-glow-color, rgba(255, 215, 0, 0.2)); } @keyframes mediaFadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } .donor-message { font-family: "Montserrat", "Inter", sans-serif; font-size: var(--message-font-size); font-weight: 400; color: var(--message-color); display: var(--show-message); word-wrap: break-word; margin: 0.5rem 1rem 0.6rem 1rem; line-height: 1.45; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } #nctv-branding { display: flex; justify-content: flex-end; align-items: center; padding: 0.15rem 0.5rem 0.35rem 0; opacity: 0.7; transition: opacity 0.3s ease; } #nctv-branding:hover { opacity: 0.9; } .nctv-title { font-family: "Montserrat", "Inter", sans-serif; font-weight: 800; letter-spacing: 2px; font-size: 0.7rem; padding: 0; text-align: right; margin: 0; text-transform: uppercase; background: linear-gradient(90deg, #00ffff 0%, #ff00ff 50%, #00ffff 100%); background-size: 200% 100%; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: brandingShine 6s ease-in-out infinite; } .text-gradient { background: -webkit-linear-gradient(left, var(--nctv-blue-primary), var(--nctv-accent-orange) 65%); background-clip: text; -webkit-background-clip: text; -moz-background-clip: text; -o-background-clip: text; -ms-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 900; } .orbitron-bold { font-family: "Orbitron", sans-serif; font-optical-sizing: auto; font-style: normal; font-weight: 800; } .orbitron { font-family: "Orbitron", sans-serif; font-optical-sizing: auto; font-style: normal; font-weight: 400; } .inter-bold { font-family: "Inter", sans-serif; font-optical-sizing: auto; font-style: normal; font-weight: 800; } .inter { font-family: "Inter", sans-serif; font-optical-sizing: auto; font-style: normal; font-weight: 400; } .fadein { animation: fadeIn 0.6s ease-in, slideUp 0.6s ease-in; animation-fill-mode: forwards; } .fadeout { animation: fadeOut 0.6s ease-out, slideOut 0.6s ease-out !important; animation-fill-mode: forwards !important; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes slideOut { from { transform: translateX(0); } to { transform: translateX(-110%); } } @keyframes slideUp { from { transform: translateY(20px); } to { transform: translateY(0); } } @keyframes highlight { 0% { background-color: var(--highlight-color, #0079b8); } 100% { background-color: var(--gibs-background-color); } } @keyframes smoothPopIn { 0% { opacity: 0; transform: scale(0.9) translateY(20px); } 60% { opacity: 1; transform: scale(1.02) translateY(-3px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } @keyframes highlightFlash { 0% { opacity: 0.8; } 100% { opacity: 0; } } @keyframes brandingShine { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes shimmer { 0% { left: -100%; } 100% { left: 100%; } } .nctv-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; } .nctv-modal-overlay.visible { opacity: 1; visibility: visible; } .nctv-modal { background: #1a1a2e; border: 1px solid #333; border-radius: 8px; padding: 1.5rem; max-width: 450px; width: 90%; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); color: #e0e0e0; } .nctv-modal .nctv-modal-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; color: #fff; border-bottom: 1px solid #333; padding-bottom: 0.75rem; } .nctv-modal .nctv-modal-body { margin-bottom: 1rem; } .nctv-modal .nctv-modal-body p { margin-bottom: 1rem; line-height: 1.5; } .nctv-modal .nctv-modal-body strong { color: var(--nctv-accent-orange); } .nctv-modal .nctv-modal-label { display: block; margin-bottom: 0.5rem; font-weight: 500; color: #ccc; } .nctv-modal .nctv-modal-input { width: 100%; padding: 0.6rem 0.75rem; background: #0d0d1a; border: 1px solid #444; border-radius: 4px; color: #fff; font-size: 0.95rem; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .nctv-modal .nctv-modal-input::placeholder { color: #666; } .nctv-modal .nctv-modal-input:focus { outline: none; border-color: var(--nctv-blue-primary); box-shadow: 0 0 0 2px rgba(50, 171, 234, 0.2); } .nctv-modal .nctv-modal-actions { display: flex; gap: 0.75rem; margin-top: 1.25rem; } .nctv-modal .nctv-modal-btn { padding: 0.5rem 1rem; border-radius: 4px; font-weight: 500; font-size: 0.9rem; cursor: pointer; transition: all 0.2s ease; border: none; } .nctv-modal .nctv-modal-btn:disabled { opacity: 0.6; cursor: not-allowed; } .nctv-modal .nctv-modal-btn-danger { background: #dc3545; color: #fff; } .nctv-modal .nctv-modal-btn-danger:hover:not(:disabled) { background: #c82333; } .nctv-modal .nctv-modal-btn-secondary { background: #444; color: #fff; } .nctv-modal .nctv-modal-btn-secondary:hover:not(:disabled) { background: #555; } .nctv-modal .nctv-modal-result { margin-top: 1rem; padding: 0.75rem; border-radius: 4px; font-size: 0.9rem; } .nctv-modal .nctv-modal-result.success { background: rgba(76, 175, 80, 0.15); border: 1px solid rgba(76, 175, 80, 0.3); color: #81c784; } .nctv-modal .nctv-modal-result.error { background: rgba(220, 53, 69, 0.15); border: 1px solid rgba(220, 53, 69, 0.3); color: #e57373; } .nctv-admin-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; } .nctv-admin-btn { padding: 0.25rem 0.6rem; border-radius: 4px; font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; border: none; white-space: nowrap; } .nctv-admin-btn:disabled { opacity: 0.5; cursor: not-allowed; } .nctv-admin-btn.terminate { background: #dc3545; color: #fff; } .nctv-admin-btn.terminate:hover:not(:disabled) { background: #c82333; } .nctv-admin-btn.terminate:disabled { background: #666; } .nctv-admin-btn.reenable { background: #28a745; color: #fff; } .nctv-admin-btn.reenable:hover:not(:disabled) { background: #218838; } .nctv-admin-btn.reenable:disabled { background: #666; } .nctv-accordion, #adminAccordion, #dashboardAccordion { --accordion-bg: #1a1a1a; --accordion-active-bg: #1e1e1e; --accordion-border-color: rgba(255, 255, 255, 0.08); --accordion-btn-color: #fff; --accordion-btn-bg: transparent; --accordion-btn-active-bg: rgba(255, 255, 255, 0.04); --accordion-body-bg: #161616; border-radius: 0.5rem; overflow: hidden; } .nctv-accordion .card, #adminAccordion .card, #dashboardAccordion .card { border: none; border-bottom: 1px solid var(--accordion-border-color); background-color: var(--accordion-bg); margin-bottom: 0; border-radius: 0; } .nctv-accordion .card:first-child, #adminAccordion .card:first-child, #dashboardAccordion .card:first-child { border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; } .nctv-accordion .card:last-child, #adminAccordion .card:last-child, #dashboardAccordion .card:last-child { border-bottom: none; border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; } .nctv-accordion .card-header, #adminAccordion .card-header, #dashboardAccordion .card-header { padding: 0; background-color: transparent; border-bottom: none; } .nctv-accordion .accordion-toggle, #adminAccordion .accordion-toggle, #dashboardAccordion .accordion-toggle { width: 100%; text-align: left; font-size: 1rem; font-weight: 500; color: var(--accordion-btn-color); text-decoration: none; display: flex; align-items: center; justify-content: space-between; background: var(--accordion-btn-bg); border: none; padding: 1rem 1.25rem; cursor: pointer; transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out; position: relative; overflow: hidden; } .nctv-accordion .accordion-toggle:hover, #adminAccordion .accordion-toggle:hover, #dashboardAccordion .accordion-toggle:hover { text-decoration: none; color: var(--accordion-btn-color); background-color: rgba(255, 255, 255, 0.03); } .nctv-accordion .accordion-toggle:focus, #adminAccordion .accordion-toggle:focus, #dashboardAccordion .accordion-toggle:focus { box-shadow: none; outline: none; z-index: 3; } .nctv-accordion .accordion-toggle:not(.collapsed), #adminAccordion .accordion-toggle:not(.collapsed), #dashboardAccordion .accordion-toggle:not(.collapsed) { background-color: var(--accordion-btn-active-bg); color: var(--nctv-blue-primary); box-shadow: inset 0 -1px 0 var(--accordion-border-color); } .nctv-accordion .accordion-toggle:not(.collapsed)::before, #adminAccordion .accordion-toggle:not(.collapsed)::before, #dashboardAccordion .accordion-toggle:not(.collapsed)::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--nctv-blue-primary), var(--nctv-accent-orange)); } .nctv-accordion .accordion-toggle::after, #adminAccordion .accordion-toggle::after, #dashboardAccordion .accordion-toggle::after { content: ""; flex-shrink: 0; width: 1rem; height: 1rem; margin-left: auto; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-size: 1rem; transition: transform 0.2s ease-in-out; } .nctv-accordion .accordion-toggle.collapsed::after, #adminAccordion .accordion-toggle.collapsed::after, #dashboardAccordion .accordion-toggle.collapsed::after { transform: rotate(-90deg); } .nctv-accordion .accordion-toggle:not(.collapsed)::after, #adminAccordion .accordion-toggle:not(.collapsed)::after, #dashboardAccordion .accordion-toggle:not(.collapsed)::after { transform: rotate(0deg); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2332abea'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); } .nctv-accordion .collapse, #adminAccordion .collapse, #dashboardAccordion .collapse { transition: none; } .nctv-accordion .collapse:not(.show), #adminAccordion .collapse:not(.show), #dashboardAccordion .collapse:not(.show) { display: none; } .nctv-accordion .card-body, #adminAccordion .card-body, #dashboardAccordion .card-body { background-color: var(--accordion-body-bg); padding: 1rem 1.25rem; border-top: 1px solid var(--accordion-border-color); } .nctv-progress-stepper { display: flex; align-items: center; justify-content: center; gap: 0; padding: 0.5rem 0; } .nctv-progress-stepper .stepper-step { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; min-width: 80px; } .nctv-progress-stepper .stepper-step .step-number { width: 32px; height: 32px; border-radius: 50%; background: rgba(128, 128, 128, 0.3); border: 2px solid rgba(128, 128, 128, 0.5); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.9rem; color: #888; transition: all 0.3s ease; } .nctv-progress-stepper .stepper-step .step-label { font-size: 0.75rem; color: #888; text-transform: uppercase; letter-spacing: 0.5px; transition: color 0.3s ease; } .nctv-progress-stepper .stepper-step.active .step-number { background: var(--nctv-blue-primary); border-color: var(--nctv-blue-primary); color: #fff; box-shadow: 0 0 12px rgba(50, 171, 234, 0.4); } .nctv-progress-stepper .stepper-step.active .step-label { color: var(--nctv-blue-primary); font-weight: 500; } .nctv-progress-stepper .stepper-step.completed .step-number { background: #28a745; border-color: #28a745; color: #fff; } .nctv-progress-stepper .stepper-step.completed .step-label { color: #28a745; } .nctv-progress-stepper .stepper-line { flex: 1; height: 2px; background: rgba(128, 128, 128, 0.3); max-width: 60px; margin: 0 0.5rem; margin-bottom: 1.25rem; transition: background 0.3s ease; } .nctv-preset-amounts { display: flex; flex-wrap: wrap; gap: 0.5rem; } .nctv-preset-btn { flex: 1 1 auto; min-width: 60px; padding: 0.5rem 0.75rem; border: 2px solid rgba(128, 128, 128, 0.4); border-radius: 0.5rem; background: rgba(255, 255, 255, 0.05); color: #e0e0e0; font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: all 0.2s ease; text-align: center; } .nctv-preset-btn:hover { border-color: var(--nctv-blue-primary); background: rgba(50, 171, 234, 0.1); } .nctv-preset-btn.active { border-color: var(--nctv-blue-primary); background: rgba(50, 171, 234, 0.2); color: #fff; box-shadow: 0 0 8px rgba(50, 171, 234, 0.3); } .nctv-preset-btn[data-tier=standard].active { border-color: #0079B8; background: rgba(0, 121, 184, 0.2); box-shadow: 0 0 8px rgba(0, 121, 184, 0.3); } .nctv-preset-btn[data-tier=middle].active { border-color: #f57200; background: rgba(245, 114, 0, 0.2); box-shadow: 0 0 8px rgba(245, 114, 0, 0.3); } .nctv-preset-btn[data-tier=high].active { border-color: #ffd700; background: rgba(255, 215, 0, 0.2); box-shadow: 0 0 8px rgba(255, 215, 0, 0.3); } .nctv-tier-indicator { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 1rem; border-radius: 0.5rem; background: rgba(0, 0, 0, 0.3); border-left: 4px solid #0079B8; transition: all 0.3s ease; } .nctv-tier-indicator .tier-badge { font-weight: 600; font-size: 0.9rem; color: #fff; } .nctv-tier-indicator .tier-hint { font-size: 0.8rem; color: #888; font-style: italic; } .nctv-tier-indicator[data-tier=standard] { border-left-color: #0079B8; background: rgba(0, 121, 184, 0.1); } .nctv-tier-indicator[data-tier=standard] .tier-badge { color: #0079B8; } .nctv-tier-indicator[data-tier=middle] { border-left-color: #f57200; background: rgba(245, 114, 0, 0.1); } .nctv-tier-indicator[data-tier=middle] .tier-badge { color: #f57200; } .nctv-tier-indicator[data-tier=high] { border-left-color: #ffd700; background: rgba(255, 215, 0, 0.15); } .nctv-tier-indicator[data-tier=high] .tier-badge { color: #ffd700; } .nctv-form-icon { vertical-align: middle; margin-right: 0.35rem; opacity: 0.8; } .nctv-label-with-icon { display: inline-flex; align-items: center; gap: 0.25rem; } .nctv-tier-badge { display: inline-block; padding: 0.5rem 1rem; border-radius: 0.5rem; background: linear-gradient(135deg, var(--nctv-blue-primary), var(--nctv-blue-secondary)); color: #fff; font-weight: 600; font-size: 1rem; box-shadow: 0 2px 8px rgba(50, 171, 234, 0.3); } #custom-amount-container { transition: all 0.2s ease; } #custom-amount-container.d-none { display: none !important; } #media-attachment-section #mediaAttachmentInput { background-color: #1a1a1a; border: 1px solid rgba(255, 255, 255, 0.15); color: #e0e0e0; max-width: 280px; transition: all 0.2s ease; } #media-attachment-section #mediaAttachmentInput::file-selector-button { background-color: #2a2a2a; border: none; border-right: 1px solid rgba(255, 255, 255, 0.15); color: #e0e0e0; padding: 0.25rem 0.5rem; margin-right: 0.5rem; transition: background-color 0.15s ease; } #media-attachment-section #mediaAttachmentInput::file-selector-button:hover { background-color: #3a3a3a; } #media-attachment-section #mediaAttachmentInput:focus { border-color: var(--nctv-blue-primary); box-shadow: 0 0 0 2px rgba(50, 171, 234, 0.2); outline: none; } #media-attachment-section #mediaAttachmentInput:disabled { cursor: not-allowed; } #media-attachment-section #mediaAttachmentInput:disabled::file-selector-button { background-color: #1a1a1a; color: #666; cursor: not-allowed; } #media-attachment-section #mediaClearBtn { padding: 0.25rem 0.5rem; font-size: 0.8rem; } #media-attachment-section #media-upload-status { min-height: 1.2rem; } #media-attachment-section #media-attachment-hint { font-size: 0.8rem; opacity: 0.75; } .nctv-action-btn::before, .nctv-action-btn::after { display: none !important; content: none !important; width: 0 !important; height: 0 !important; } .nctv-action-btn.active::before, .nctv-action-btn.active::after, .nctv-action-btn:active::before, .nctv-action-btn:active::after { display: none !important; content: none !important; width: 0 !important; height: 0 !important; } @media (max-width: 576px) { .nctv-preset-amounts { gap: 0.35rem; } .nctv-preset-btn { min-width: 50px; padding: 0.4rem 0.5rem; font-size: 0.85rem; } .nctv-progress-stepper .stepper-step { min-width: 60px; } .nctv-progress-stepper .stepper-step .step-number { width: 28px; height: 28px; font-size: 0.8rem; } .nctv-progress-stepper .stepper-step .step-label { font-size: 0.65rem; } .nctv-progress-stepper .stepper-line { max-width: 40px; } } #creator-signup-wrapper { padding-top: 1.5rem; padding-bottom: 2rem; } #creator-signup-wrapper h2 { font-weight: 700; color: #fff; } #creator-signup-wrapper .card.bg-dark { background-color: #1e1e1e !important; border: 1px solid rgba(255, 255, 255, 0.1); } #creator-signup-wrapper .card.bg-dark h5 { color: var(--nctv-blue-primary); font-weight: 600; } #creator-signup-wrapper .card.bg-dark ul li { line-height: 1.5; color: #e0e0e0; } #creator-signup-wrapper .form-select { background-color: #1a1a1a; border: 1px solid rgba(255, 255, 255, 0.15); color: #e0e0e0; } #creator-signup-wrapper .form-select:focus { border-color: var(--nctv-blue-primary); box-shadow: 0 0 0 2px rgba(50, 171, 234, 0.2); } #creator-signup-wrapper .form-select option { background-color: #1a1a1a; color: #e0e0e0; } #creator-signup-wrapper .form-check-input:checked { background-color: var(--nctv-blue-primary); border-color: var(--nctv-blue-primary); } #creator-signup-wrapper .form-check-input:focus { box-shadow: 0 0 0 2px rgba(50, 171, 234, 0.25); } #creator-signup-wrapper #signup-submit-btn { background: linear-gradient(135deg, var(--nctv-accent-orange), var(--nctv-accent-orange-subtle)); border: none; font-weight: 600; letter-spacing: 0.5px; transition: all 0.2s ease; } #creator-signup-wrapper #signup-submit-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(245, 114, 0, 0.4); } #creator-signup-wrapper #signup-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; } #embedded-onboarding-wrapper { padding-top: 1.5rem; padding-bottom: 2rem; max-width: 900px; margin: 0 auto; } #embedded-onboarding-wrapper h4 { font-weight: 600; color: #fff; } #embedded-onboarding-wrapper #embedded-onboarding-container { min-height: 500px; background-color: transparent; border-radius: 0.5rem; padding: 0; } #embedded-onboarding-wrapper #embedded-onboarding-container .spinner-border { width: 3rem; height: 3rem; } #embedded-onboarding-wrapper #embedded-onboarding-container .text-danger { font-weight: 500; } #embedded-onboarding-wrapper #embedded-onboarding-container > * { width: 100%; min-height: 450px; } .analytics-range-buttons .analytics-range-btn { padding: 0.375rem 0.75rem; font-size: 0.875rem; font-weight: 500; border: 1px solid rgba(255, 255, 255, 0.15); background-color: transparent; color: #e0e0e0; transition: all 0.2s ease; } .analytics-range-buttons .analytics-range-btn:hover { background-color: rgba(50, 171, 234, 0.1); border-color: var(--nctv-blue-primary); color: #fff; } .analytics-range-buttons .analytics-range-btn.active { background-color: var(--nctv-blue-primary); border-color: var(--nctv-blue-primary); color: #fff; box-shadow: 0 0 8px rgba(50, 171, 234, 0.3); } .analytics-range-buttons .analytics-range-btn:focus { box-shadow: 0 0 0 2px rgba(50, 171, 234, 0.3); outline: none; } #analytics-loading { color: #888; } #analytics-loading .spinner-border { width: 1.25rem; height: 1.25rem; border-width: 0.15em; color: var(--nctv-blue-primary); } #analytics-error .btn-outline-danger { padding: 0.25rem 0.75rem; font-size: 0.8rem; } .analytics-chart-container { background-color: rgba(26, 26, 26, 0.5); border-radius: 0.375rem; padding: 0.5rem; } .analytics-chart-container canvas { max-width: 100%; } .analytics-chart-legend { font-size: 0.8rem; color: #888; } .analytics-chart-legend .legend-item { display: inline-flex; align-items: center; gap: 0.35rem; } .analytics-chart-legend .legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; } #top-videos-table-container { width: 100%; } #top-videos-table { width: 100%; font-size: 0.9rem; } #top-videos-table thead th { font-weight: 600; color: #888; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.5px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding: 0.5rem 0.75rem; } #top-videos-table tbody td { padding: 0.6rem 0.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); vertical-align: middle; } #top-videos-table tbody tr:hover { background-color: rgba(50, 171, 234, 0.05); } #top-videos-table tbody tr:last-child td { border-bottom: none; } #top-videos-table tbody a { color: var(--nctv-blue-primary); text-decoration: none; } #top-videos-table tbody a:hover { text-decoration: underline; color: #fff; } #top-videos-table .text-right { text-align: right; } #analytics-range-label { font-size: 0.85rem; font-weight: 400; } @media (max-width: 991px) { .analytics-chart-container { margin-bottom: 1rem; } } @media (max-width: 768px) { .analytics-chart-container { height: 200px !important; } .analytics-range-buttons .analytics-range-btn { padding: 0.3rem 0.5rem; font-size: 0.8rem; } #analytics-container .nctv-stat-card { min-width: 110px; padding: 0.75rem; } #analytics-container .nctv-stat-card .stat-value { font-size: 1.25rem; } #analytics-container .nctv-stat-card .stat-label { font-size: 0.75rem; } #top-videos-table { font-size: 0.8rem; } #top-videos-table thead th, #top-videos-table tbody td { padding: 0.4rem 0.5rem; } } @media (max-width: 576px) { #analytics-container .d-flex.flex-wrap { flex-direction: column; } #analytics-container .nctv-stat-card { min-width: 100%; margin-bottom: 0.5rem; } }