: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; } /* * Default browser styles */ html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } p { margin: 0; } a { color: var(--sb-main-fg-color); text-decoration: none; } button { background: transparent; border: 0; cursor: pointer; padding: 0; } /* * Disable transition on all elements until the extension has loaded */ .preload * { transition: none !important; } /* * IDs on element, element and main container */ #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; } /* * Header logo */ .logo { display: flex; align-items: center; font-size: 32px; font-weight: bold; justify-content: center; user-select: none; padding: 20px 0 10px; } .logo img { margin-right: 8px; } /* * Refresh segments button */ #refreshSegmentsButton { border-radius: 50%; display: flex; padding: 5px; margin: 5px auto; align-items: center; } #refreshSegmentsButton:hover { background-color: var(--sb-grey-bg-color); } /* * Individual segments (