:root { --sb-main-font-family: "Source Sans Pro", sans-serif; --sb-main-bg-color: #222626; --sb-main-fg-color: #fff; --sb-grey-bg-color: #333; --sb-red-bg-color: #cc1717; } /* * IDs on container element (when inserted in page), element, * element and main container */ #sponsorBlockPopupContainer { margin-bottom: 16px; } #sponsorBlockPopupHTML { color-scheme: dark; } #sponsorBlockPopupBody { margin: 0; width: 374px; font-family: var(--sb-main-font-family); font-size: 14px; background-color: var(--sb-main-bg-color); color: var(--sb-main-fg-color); color-scheme: dark; } #sponsorblockPopup { text-align: center; } /* * Disable transition on all elements until the extension has loaded */ .sb-preload * { transition: none !important; } /* * Header logo */ .sbPopupLogo { display: flex; align-items: center; font-size: 32px; font-weight: bold; justify-content: center; user-select: none; padding: 20px 0 10px; } .sbPopupLogo img { margin-right: 8px; } /* * Refresh segments button */ #refreshSegmentsButton { background: transparent; border: 0; border-radius: 50%; cursor: pointer; display: flex; padding: 5px; margin: 5px auto; align-items: center; } #refreshSegmentsButton:hover { background-color: var(--sb-grey-bg-color); } /* * Individual segments (