: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); } /* *

wrapper around each segment */ .votingButtons { font-family: Arial, Helvetica, sans-serif; } .votingButtons[open] { padding-bottom: 5px; } .votingButtons:hover { background-color: var(--sb-grey-bg-color); } /* * Individual segments summaries (clickable

) */ .segmentSummary { cursor: pointer; font-weight: bold; padding: 7px; list-style: none; white-space: nowrap; } /* * Category dot in segment */ .sponsorTimesCategoryColorCircle { margin: 0 8px; } .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } /* * Buttons that appear under a segment on click */ .voteButton { height: 20px; padding: 0 5px; cursor: pointer; } /* * "Voted!" text that appears after voting on a segment */ .sponsorTimesThanksForVotingText { font-size: large; } /* * Main controls menu */ .sbControlsMenu { background-color: var(--sb-grey-bg-color); display: flex; justify-content: space-evenly; margin-top: 10px; } .sbControlsMenu-item { background-color: var(--sb-grey-bg-color); border: 0; padding: 0; cursor: pointer; user-select: none; padding: 10px 15px; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; } .sbControlsMenu-item:hover { background-color: #444; } .sbControlsMenu-itemIcon { margin-bottom: 6px; } /* * "Skipping is enabled" toggle */ .toggleSwitchContainer { cursor: pointer; display: flex; flex-direction: column; align-items: center; } .toggleSwitchContainer-switch { display: flex; margin-bottom: 6px; } .switchBg { display: block; width: 50px; height: 23px; border-radius: 18.5px; } .switchBg.shadow { box-shadow: 0.75px 0.75px 10px 0px rgba(50, 50, 50, 0.5); opacity: 1; } .switchBg.white { position: absolute; background-color: #ccc; opacity: 1; } .switchBg.green { position: absolute; background-color: #00a205; opacity: 0; transition: opacity 0.2s ease-out; } .switchDot { background-color: var(--sb-main-fg-color); border-radius: 50%; width: 15px; height: 15px; margin: 4px; position: absolute; box-shadow: 0.75px 0.75px 3.8px 0px rgba(50, 50, 50, 0.45); transition: transform 0.2s ease-out; } #toggleSwitch:checked ~ .switchDot { transform: translateX(27px); } #toggleSwitch:checked ~ .switchBg.green { opacity: 1; } #toggleSwitch:checked ~ .switchBg.white { opacity: 0; transition: opacity 0.2s step-end; } /* * Whitelist add/remove icon */ .SBWhitelistIcon > path { fill: var(--sb-main-fg-color); } .SBWhitelistIcon.rotated { transform: rotate(45deg); } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* * Notice that appears when whitelisting a channel, that recommends * enabling the "Force Channel Check Before Skipping" option */ #whitelistForceCheck { font-weight: bold; text-decoration: underline; font-size: large; cursor: pointer; padding: 10px 0; } /* * Container around the "Segment Starts Now" and "Submit Times" buttons */ #mainControls { flex-flow: column; align-items: center; margin-bottom: 12px; } /* * Generic buttons used for "Segment Starts Now" and "Submit Times" */ .sbMediumButton { background-color: var(--sb-red-bg-color); border: 0; -moz-border-radius: 28px; -webkit-border-radius: 28px; border-radius: 28px; display: inline-block; cursor: pointer; color: var(--sb-main-fg-color); font-size: 16px; padding: 8px 37px; font-family: var(--sb-main-font-family); transition: 0.01s background-color; } .sbMediumButton:hover, .sbMediumButton:focus { outline: none; background-color: #ec1c1c; } .sbMediumButton:active { position: relative; top: 1px; } /* * "Submit Times" button */ #submitTimes { margin-top: 12px; } /* * Heading utility class */ .sbHeader { font-size: 20px; font-weight: bold; margin: 10px 0 5px; } /* * Side-by-side section of "Your Work" */ .sbYourWorkCols { display: flex; margin: 0 20px 12px; } .sbYourWorkCols > div { display: flex; align-items: center; width: 50%; justify-content: center; } /* *