Adjust skip profile name box size

Fixes #2343

manifest/chrome-manifest-extra.json

@@ -53,6 +53,8 @@
       "icons/PlayerInfoIconSponsorBlocker.svg",
       "icons/PlayerDeleteIconSponsorBlocker.svg",
       "icons/dearrow.svg",
+      "icons/sb-pride.png",
+      "icons/pride.svg",
       "popup.html",
       "popup.css",
       "content.css",

manifest/manifest-v2-extra.json

@@ -45,6 +45,8 @@
         "icons/PlayerInfoIconSponsorBlocker.svg",
         "icons/PlayerDeleteIconSponsorBlocker.svg",
         "icons/dearrow.svg",
+        "icons/sb-pride.png",
+        "icons/pride.svg",
         "popup.html",
         "popup.css",
         "content.css",

manifest/manifest.json

@@ -1,7 +1,7 @@
 {
     "name": "__MSG_fullName__",
     "short_name": "SponsorBlock",
-    "version": "6.0.1",
+    "version": "6.0.3",
     "default_locale": "en",
     "description": "__MSG_Description__",
     "homepage_url": "https://sponsor.ajay.app",

public/content.css

@@ -973,4 +973,26 @@ input::-webkit-inner-spin-button {
 
 .sponsorblock-chapter-visible {
 	display: block !important;
+}
+
+/* Pride theme */
+
+.playerButton.prideTheme:nth-of-type(1) {
+	filter: brightness(50%) sepia(100) saturate(100);
+}
+
+.playerButton.prideTheme:nth-of-type(2) {
+	filter: sepia(100) saturate(100) hue-rotate(0deg);
+}
+
+.playerButton.prideTheme:nth-of-type(3) {
+	filter: sepia(100) saturate(100) hue-rotate(45deg);
+}
+
+.playerButton.prideTheme:nth-of-type(4) {
+	filter: sepia(100) saturate(100) invert() hue-rotate(5deg);
+}
+
+.playerButton.prideTheme:nth-of-type(5) {
+	filter: sepia(100) saturate(100) invert() hue-rotate(35deg);
 }

public/icons/pride.svg

@@ -0,0 +1,90 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 11718.75 3810"
+   width="1000"
+   height="325"
+   version="1.1"
+   id="svg11"
+   sodipodi:docname="pride.svg"
+   inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs11" />
+  <sodipodi:namedview
+     id="namedview11"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="0.42575964"
+     inkscape:cx="863.16308"
+     inkscape:cy="32.882403"
+     inkscape:window-width="1536"
+     inkscape:window-height="799"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg11" />
+  <path
+     fill="#750787"
+     d="M 0,0 H 15033.943 V 3810 H 0 Z"
+     id="path1"
+     style="stroke-width:1.58293" />
+  <path
+     fill="#004dff"
+     d="M 0,0 H 15033.943 V 3175 H 0 Z"
+     id="path2"
+     style="stroke-width:1.58293" />
+  <path
+     fill="#008026"
+     d="M 0,0 H 15033.943 V 2540 H 0 Z"
+     id="path3"
+     style="stroke-width:1.58293" />
+  <path
+     fill="#ffed00"
+     d="M 0,0 H 15033.943 V 1905 H 0 Z"
+     id="path4"
+     style="stroke-width:1.58293" />
+  <path
+     fill="#ff8c00"
+     d="M 0,0 H 15033.943 V 1270 H 0 Z"
+     id="path5"
+     style="stroke-width:1.58293" />
+  <path
+     fill="#e40303"
+     d="M 0,0 H 15033.943 V 635 H 0 Z"
+     id="path6"
+     style="stroke-width:1.58293" />
+  <path
+     d="M 0,-960.5 2864,1905 0,4770.5 Z"
+     id="path7" />
+  <path
+     fill="#613915"
+     d="M 0,-480 2384,1905 0,4290 Z"
+     id="path8" />
+  <path
+     fill="#74d7ee"
+     d="M 0,3810 V 0 l 1912,1905 z"
+     id="path9" />
+  <path
+     fill="#ffafc8"
+     d="M 0,3330 V 480 l 1420,1425 z"
+     id="path10" />
+  <path
+     fill="#ffffff"
+     d="M 0,960 951,1905 0,2850 Z"
+     id="path11" />
+  <rect
+     style="fill:#000000;fill-opacity:0.621027;stroke:#550000;stroke-width:42.5545"
+     id="rect11"
+     width="12283.648"
+     height="4656.5938"
+     x="-243.66638"
+     y="-421.53296" />
+</svg>

public/options/options.css

@@ -17,6 +17,10 @@
     --border-color: #484848;
     --black: black;
     --white: white;
+
+    --selector-red: #c00000;
+    --selector-red-hover: #fc0303;
+    --tab-selected: #950000;
 }
 
 [data-theme="light"] {
@@ -38,6 +42,10 @@
     --white: black;
 }
 
+[data-theme="pride"] {
+    --menu-background: #181818d0;
+}
+
 .medium-description, .switch-container, .optionLabel, .categoryTableElement, .promotion-description {
     color: var(--white);
 }
@@ -58,6 +66,12 @@ html, body {
     background-color: var(--background);
 }
 
+[data-theme="pride"] body {
+    background: url("../icons/pride.svg");
+    background-size: contain;
+}
+
+
 * {
     box-sizing: border-box;
 }
@@ -107,15 +121,99 @@ html, body {
 }
 
 .tab-heading.selected {
-    background-color: #c00000;
+    background-color: var(--selector-red);
     color: white;
 }
 
 .tab-heading:active {
-    background-color: #950000;
+    background-color: var(--tab-selected);
     color: white;
 }
 
+[data-theme="pride"] .tab-heading:nth-of-type(1) {
+    background-color: #2f0000;
+}
+[data-theme="pride"] .tab-heading:nth-of-type(2) {
+    background-color: #3a2000;
+}
+[data-theme="pride"] .tab-heading:nth-of-type(3) {
+    background-color: #3e3a00;
+}
+[data-theme="pride"] .tab-heading:nth-of-type(4) {
+    background-color: #003e13;
+}
+[data-theme="pride"] .tab-heading:nth-of-type(5) {
+    background-color: #00164a;
+}
+
+[data-theme="pride"] .tab-heading:hover:nth-of-type(1) {
+    background-color: #550000;
+}
+[data-theme="pride"] .tab-heading:hover:nth-of-type(2),
+[data-theme="pride"] #category-type tr:nth-of-type(5n) .slider,
+[data-theme="pride"] [data-type="toggle"]:nth-of-type(5n) .slider {
+    background-color: #824700;
+}
+[data-theme="pride"] .tab-heading:hover:nth-of-type(3),
+[data-theme="pride"] #category-type tr:nth-of-type(5n + 1) .slider,
+[data-theme="pride"] [data-type="toggle"]:nth-of-type(5n + 1) .slider {
+    background-color: #867d00;
+}
+[data-theme="pride"] .tab-heading:hover:nth-of-type(4),
+[data-theme="pride"] #category-type tr:nth-of-type(5n + 2) .slider,
+[data-theme="pride"] [data-type="toggle"]:nth-of-type(5n + 2) .slider {
+    background-color: #00691f;
+}
+[data-theme="pride"] .tab-heading:hover:nth-of-type(5),
+[data-theme="pride"] #category-type tr:nth-of-type(5n + 3) .slider,
+[data-theme="pride"] [data-type="toggle"]:nth-of-type(5n + 3) .slider {
+    background-color: #002374;
+}
+[data-theme="pride"] #category-type tr:nth-of-type(5n + 4) .slider,
+[data-theme="pride"] [data-type="toggle"]:nth-of-type(5n + 4) .slider {
+    background-color: #400449;
+}
+
+[data-theme="pride"] #category-type tr .optionsSelector {
+    color: var(--white);
+}
+[data-theme="pride"] .tab-heading:nth-of-type(1).selected {
+    background-color: #E40303;
+}
+[data-theme="pride"] .tab-heading:nth-of-type(2).selected,
+[data-theme="pride"] #category-type tr:nth-of-type(10n + 2) .optionsSelector,
+[data-theme="pride"] #category-type tr:nth-of-type(5n) input:checked + .slider,
+[data-theme="pride"] [data-type]:nth-of-type(5n) :is(input:checked + .slider, .option-button, .optionsSelector) {
+    background-color: #dd7a00;
+}
+[data-theme="pride"] .tab-heading:nth-of-type(3).selected,
+[data-theme="pride"] #category-type tr:nth-of-type(10n + 4) .optionsSelector,
+[data-theme="pride"] #category-type tr:nth-of-type(2n + 1) .optionsSelector,
+[data-theme="pride"] #category-type tr:nth-of-type(5n + 1) input:checked + .slider,
+[data-theme="pride"] [data-type]:nth-of-type(5n + 1) :is(input:checked + .slider, .option-button, .optionsSelector) {
+    background-color: #FFED00;
+    color: rgb(23, 23, 23);
+}
+[data-theme="pride"] .tab-heading:nth-of-type(4).selected,
+[data-theme="pride"] #category-type tr:nth-of-type(10n + 6) .optionsSelector,
+[data-theme="pride"] #category-type tr:nth-of-type(5n + 2) input:checked + .slider,
+[data-theme="pride"] [data-type]:nth-of-type(5n + 2) :is(input:checked + .slider, .option-button, .optionsSelector) {
+    background-color: #008026;
+}
+[data-theme="pride"] .tab-heading:nth-of-type(5).selected,
+[data-theme="pride"] #category-type tr:nth-of-type(10n + 8) .optionsSelector,
+[data-theme="pride"] #category-type tr:nth-of-type(5n + 3) input:checked + .slider,
+[data-theme="pride"] [data-type]:nth-of-type(5n + 3) :is(input:checked + .slider, .option-button, .optionsSelector) {
+    background-color: #004DFF;
+}
+[data-theme="pride"] .tab-heading:nth-of-type(5).selected,
+[data-theme="pride"] #category-type tr:nth-of-type(10n + 10) .optionsSelector,
+[data-theme="pride"] #category-type tr:nth-of-type(5n + 4) input:checked + .slider,
+[data-theme="pride"] [data-type]:nth-of-type(5n + 4) :is(input:checked + .slider, .option-button, .optionsSelector) {
+    background-color: #750787;
+}
+
+
 .option-group > div, .extraOptionGroup {
     min-height: 50px;
     padding: 15px 0;
@@ -135,7 +233,7 @@ html, body {
     padding: 0;
 }
 
-.categoryChooserTable .categoryExtraOptions {
+#category-type .categoryExtraOptions {
     padding-bottom: 15px;
 }
 
@@ -310,7 +408,7 @@ input[type='number'] {
 .option-button {
     cursor: pointer;
 
-    background-color: #c00000;
+    background-color: var(--selector-red);
     padding: 10px;
     color: white;
     border-radius: 5px;
@@ -320,7 +418,7 @@ input[type='number'] {
 }
 
 .option-button:hover:not(.disabled) {
-    background-color: #fc0303;
+    background-color: var(--selector-red-hover);
 }
 
 .option-button.disabled {
@@ -430,7 +528,7 @@ input[type='number'] {
 }
 
 input:checked + .slider {
-    background-color: #fc0303;
+    background-color: var(--selector-red-hover);
 }
 
 input:checked + .slider:before {
@@ -611,7 +709,7 @@ svg {
 }
 
 .optionsSelector {
-    background-color: #c00000;
+    background-color: var(--selector-red);
     color: white;
     
     border: none;

public/options/options.html

@@ -19,7 +19,7 @@
 		<div id="menubar" class="center">
 
 			<div id="title" class="titleBar">
-				<img src="../icons/LogoSponsorBlocker256px.png" class="profilepic" alt="SponsorBlock logo"/>
+				<img id="title-bar-logo" src="../icons/LogoSponsorBlocker256px.png" class="profilepic" alt="SponsorBlock logo"/>
 				SponsorBlock
 				<div id="version"></div>
 			</div>
@@ -80,9 +80,9 @@
                     </a>
 				</div>
 
-				<div data-type="react-AdvancedSkipOptionsComponent"></div>
+				<div data-type="react-AdvancedSkipOptionsComponent" class="hide-when-skip-profile"></div>
 
-				<div data-type="toggle" data-sync="forceChannelCheck">
+				<div data-type="toggle" data-sync="forceChannelCheck" class="hide-when-skip-profile">
 					<div class="switch-container">
 						<label class="switch">
 							<input id="forceChannelCheck" type="checkbox" checked>
@@ -96,7 +96,7 @@
 					<div class="small-description">__MSG_whatForceChannelCheck__</div>
 				</div>
 
-				<div data-type="toggle" data-sync="showCategoryWithoutPermission">
+				<div data-type="toggle" data-sync="showCategoryWithoutPermission" class="hide-when-skip-profile">
 					<div class="switch-container">
 						<label class="switch">
 							<input id="showCategoryWithoutPermission" type="checkbox" checked>
@@ -305,15 +305,17 @@
 					<div class="small-description">__MSG_showTimeWithSkipsDescription__</div>
 				</div>
 
-				<div data-type="toggle" data-sync="cleanPopup">
+				<div>
-					<div class="switch-container">
+					<div data-type="toggle" data-sync="cleanPopup">
-						<label class="switch">
+						<div class="switch-container">
-							<input id="cleanPopup" type="checkbox" checked>
+							<label class="switch">
-							<span class="slider round"></span>
+								<input id="cleanPopup" type="checkbox" checked>
-						</label>
+								<span class="slider round"></span>
-						<label class="switch-label" for="cleanPopup">
+							</label>
-							__MSG_cleanPopup__
+							<label class="switch-label" for="cleanPopup">
-						</label>
+								__MSG_cleanPopup__
+							</label>
+						</div>
 					</div>
 
 					<br/>
@@ -329,6 +331,17 @@
 							</label>
 						</div>
 					</div>
+
+					<br />
+
+					<div data-type="selector" data-sync="segmentListDefaultTab">
+						<label class="optionLabel" for="segmentListDefaultTab">__MSG_segmentListDefaultTab__:</label>
+
+						<select id="segmentListDefaultTab" class="selector-element optionsSelector">
+							<option value="0">__MSG_SegmentsCap__</option>
+							<option value="1">__MSG_Chapters__</option>
+						</select>
+					</div>
 				</div>
 
 				<div data-type="toggle" data-sync="darkMode">
@@ -343,6 +356,18 @@
 					</div>
 				</div>
 
+				<div data-type="toggle" data-sync="prideTheme">
+					<div class="switch-container">
+						<label class="switch">
+							<input id="prideTheme" type="checkbox" checked>
+							<span class="slider round"></span>
+						</label>
+						<label class="switch-label" for="prideTheme">
+							__MSG_prideTheme__
+						</label>
+					</div>
+				</div>
+
 				<div data-type="toggle" data-toggle-type="reverse" data-sync="showNewFeaturePopups">
 					<div class="switch-container">
 						<label class="switch">

public/popup.css

@@ -3,8 +3,29 @@
   --sb-main-bg-color: #222;
   --sb-main-fg-color: #fff;
   --sb-grey-bg-color: #333;
+  --sb-grey-bg-active-color: #444;
   --sb-grey-fg-color: #999;
   --sb-red-bg-color: #cc1717;
+  --sb-red-bg-active-color: #ec1c1c;
+  --sb-skip-profile-bg: #292828;
+  --sb-skip-profile-disabled: #808080;
+  --sb-skip-profile-option-bg: #222;
+  --sb-skip-profile-highlighted: rgb(127, 0, 0);
+}
+
+.prideTheme {
+  --sb-main-fg-color: #fff;
+  --sb-grey-bg-color: #008026;
+  --sb-grey-bg-active-color: #FF8C00;
+  --sb-grey-fg-color: #FFED00;
+  --sb-red-bg-color: #732982;
+  --sb-red-bg-active-color: #004CFF;
+  --sb-skip-profile-bg: #FFAFC8;
+  --sb-skip-profile-disabled: #74D7EE;
+  --sb-skip-profile-option-bg: #f687aa;
+  --sb-skip-profile-highlighted: #38153f;
+
+  background: url("icons/pride.svg");
 }
 
 /*
@@ -300,6 +321,8 @@
   justify-content: space-evenly;
   display: flex;
   position: relative;
+
+  z-index: 1;
 }
 .sbControlsMenu-item {
   display: flex;
@@ -321,12 +344,22 @@
   border-radius: 0px 8px 8px 0px;
 }
 .sbControlsMenu-item:hover, .sbControlsMenu-item:focus {
-  background-color: #444;
+  background-color: var(--sb-grey-bg-active-color) !important;
 }
 .sbControlsMenu-itemIcon {
   margin-bottom: 6px;
 }
 
+.prideTheme .sbControlsMenu-item:nth-child(1) {
+  background-color: #750787;
+}
+.prideTheme .sbControlsMenu-item:nth-child(3) {
+  background-color: #0035b1;
+}
+.prideTheme .sbControlsMenu-item:nth-child(4) {
+  background-color: #008026;
+}
+
 /*
  * Whitelist add/remove icon
  */
@@ -447,7 +480,7 @@
 }
 .sbMediumButton:hover,
 .sbMediumButton:focus {
-  background-color: #ec1c1c;
+  background-color: var(--sb-red-bg-active-color);
   outline: none;
 }
 .sbMediumButton:active {
@@ -585,12 +618,42 @@
   margin: 2px 1px;
 }
 #sbFooter a:hover {
-  background-color: #444;
+  background-color: var(--sb-grey-bg-active-color) !important;
+}
+
+.prideTheme #sbFooter a:nth-of-type(1) {
+  background-color: #E40303;
+}
+.prideTheme #sbFooter a:nth-of-type(2) {
+  background-color: #FF8C00;
+}
+.prideTheme #sbFooter a:nth-of-type(3) {
+  background-color: #b9ad00;
+}
+.prideTheme #sbFooter a:nth-of-type(4) {
+  background-color: #008026;
+}
+.prideTheme #sbFooter a:nth-of-type(5) {
+  background-color: #004DFF;
+}
+.prideTheme #sbFooter a:nth-of-type(6) {
+  background-color: #750787;
+}
+.prideTheme #sbFooter a:nth-of-type(7) {
+  background-color: #c7899d;
+}
+.prideTheme #sbFooter a:nth-of-type(8) {
+  background-color: #65b8cb;
+}
+.prideTheme #sbFooter a:nth-of-type(9) {
+  background-color: #613915;
 }
 
 #sponsorTimesDonateContainer a {
   color: var(--sb-main-fg-color);
   text-decoration: none;
+
+  padding-left: 5px;
 }
 
 /*
@@ -661,7 +724,7 @@
   top: 80px;
   left: 50%;
 
-  background-color: #292828;
+  background-color: var(--sb-skip-profile-bg);
   border-radius: 10px;
   padding: 10px;
 
@@ -678,7 +741,7 @@
   padding: 5px;
   margin: 5px;
 
-  background-color: #222;
+  background-color: var(--sb-skip-profile-option-bg);
   border-radius: 5px;
 
   cursor: help;
@@ -695,13 +758,13 @@
   border-color: var(--sb-red-bg-color);
 }
 .skipOptionAction.highlighted {
-  border-color: rgb(127, 0, 0);
+  border-color: var(--sb-skip-profile-highlighted);
 }
 .skipOptionAction:not(.highlighted, .disabled) {
   cursor: pointer;
 }
 .skipOptionAction.disabled {
-  color: #808080
+  color: var(--sb-skip-profile-disabled);
 }
 
 .optionsSelector {

public/shared.css

@@ -28,6 +28,11 @@
 	min-width: 100%;
 }
 
+.sponsorSkipNoticeTableContainer.prideTheme {
+	background: url("icons/pride.svg");
+	background-size: cover;
+}
+
 .sponsorSkipNotice {
 	transition: all 0.1s ease-out;
 }

src/background.ts

@@ -13,6 +13,7 @@ import { isFirefoxOrSafari, waitFor } from "../maze-utils/src";
 import { injectUpdatedScripts } from "../maze-utils/src/cleanup";
 import { logWarn } from "./utils/logger";
 import { chromeP } from "../maze-utils/src/browserApi";
+import { getHash } from "../maze-utils/src/hash";
 const utils = new Utils({
     registerFirefoxContentScript,
     unregisterFirefoxContentScript
@@ -136,6 +137,12 @@ chrome.runtime.onInstalled.addListener(function () {
                 chrome.tabs.create({url: chrome.runtime.getURL("/permissions/index.html")});
             }
         }
+
+        getHash(Config.config!.userID!).then((userID) => {
+            if (userID == "60eed03c8644b7efa32df06977b3a4c11b62f63518e74a0e29baa1fd449cb54f") {
+                Config.config.prideTheme = true;
+            }
+        });
     }, 1500);
 
     if (!isFirefoxOrSafari()) {

src/components/CategoryPillComponent.tsx

@@ -60,7 +60,7 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP
                 
                 <span className="sponsorBlockCategoryPillTitleSection">
                     <img className="sponsorSkipLogo sponsorSkipObject"
-                        src={chrome.runtime.getURL("icons/IconSponsorBlocker256px.png")}>
+                        src={chrome.runtime.getURL(Config.config.prideTheme ? "icons/sb-pride.png" : "icons/IconSponsorBlocker256px.png")}>
                     </img>
 
                     {

src/components/NoticeComponent.tsx

@@ -160,7 +160,8 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
                 style={noticeStyle} >
                 <div className={"sponsorSkipNoticeTableContainer" 
                         + (this.props.fadeIn ? " sponsorSkipNoticeFadeIn" : "")
-                        + (this.state.startFaded ? " sponsorSkipNoticeFaded" : "") }>
+                        + (this.state.startFaded ? " sponsorSkipNoticeFaded" : "") 
+                        + (Config.config.prideTheme ? " prideTheme" : "")}>
                     <table className={"sponsorSkipObject sponsorSkipNotice"
                                 + (this.props.limitWidth ? " sponsorSkipNoticeLimitWidth" : "")}>
                         <tbody>
@@ -172,10 +173,18 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
                                 <td className="noticeLeftIcon">
                                     {/* Logo */}
                                     {!this.props.hideLogo &&
-                                        <SbSvg
+                                        (
-                                            id={"sponsorSkipLogo" + this.idSuffix} 
+                                            !Config.config.prideTheme ?
-                                            fill={this.props.logoFill}
+                                                <SbSvg
-                                            className="sponsorSkipLogo sponsorSkipObject"/>
+                                                    id={"sponsorSkipLogo" + this.idSuffix} 
+                                                    fill={this.props.logoFill}
+                                                    className="sponsorSkipLogo sponsorSkipObject"/>
+                                            :
+                                                <img 
+                                                    id={"sponsorSkipLogo" + this.idSuffix} 
+                                                    src={chrome.runtime.getURL("icons/sb-pride.png")}
+                                                    className="sponsorSkipLogo sponsorSkipObject"/>
+                                        )
                                     }
 
                                     <span id={"sponsorSkipMessage" + this.idSuffix}

src/components/SponsorTimeEditComponent.tsx

@@ -123,6 +123,8 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
             style.marginTop = "15px";
         }
 
+        const borderColor = this.state.selectedCategory ? Config.config.barTypes[this.state.selectedCategory]?.color : null;
+
         // Create time display
         let timeDisplay: JSX.Element;
         const timeDisplayStyle: React.CSSProperties = {};
@@ -151,7 +153,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                         <input id={"submittingTime0" + this.idSuffix}
                             className="sponsorTimeEdit sponsorTimeEditInput"
                             type="text"
-                            style={{color: "inherit", backgroundColor: "inherit"}}
+                            style={{color: "inherit", backgroundColor: "inherit", borderColor}}
                             value={this.state.sponsorTimeEdits[0] ?? ""}
                             onKeyDown={(e) => e.stopPropagation()}
                             onKeyUp={(e) => e.stopPropagation()}
@@ -168,7 +170,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                                 <input id={"submittingTime1" + this.idSuffix}
                                     className="sponsorTimeEdit sponsorTimeEditInput"
                                     type="text"
-                                    style={{color: "inherit", backgroundColor: "inherit"}}
+                                    style={{color: "inherit", backgroundColor: "inherit", borderColor}}
                                     value={this.state.sponsorTimeEdits[1] ?? ""}
                                     onKeyDown={(e) => e.stopPropagation()}
                                     onKeyUp={(e) => e.stopPropagation()}
@@ -215,7 +217,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                     <select id={"sponsorTimeCategories" + this.idSuffix}
                         className="sponsorTimeEditSelector sponsorTimeCategories"
                         ref={this.categoryOptionRef}
-                        style={{color: "inherit", backgroundColor: "inherit"}}
+                        style={{color: "inherit", backgroundColor: "inherit", borderColor}}
                         value={this.state.selectedCategory}
                         onChange={(event) => this.categorySelectionChange(event)}>
                         {this.getCategoryOptions()}
@@ -240,7 +242,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                         <select id={"sponsorTimeActionTypes" + this.idSuffix}
                             className="sponsorTimeEditSelector sponsorTimeActionTypes"
                             value={this.state.selectedActionType}
-                            style={{color: "inherit", backgroundColor: "inherit"}}
+                            style={{color: "inherit", backgroundColor: "inherit", borderColor}}
                             ref={this.actionTypeOptionRef}
                             onChange={(e) => this.actionTypeSelectionChange(e)}>
                             {this.getActionTypeOptions(sponsorTime)}
@@ -269,7 +271,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                     <div onBlur={() => this.setState({chapterNameSelectorOpen: false})}>
                         <input id={"chapterName" + this.idSuffix}
                             className="sponsorTimeEdit sponsorTimeEditInput sponsorChapterNameInput"
-                            style={{color: "inherit", backgroundColor: "inherit"}}
+                            style={{color: "inherit", backgroundColor: "inherit", borderColor}}
                             ref={this.descriptionOptionRef}
                             type="text"
                             value={this.state.description}

src/components/options/CategoryChooserComponent.tsx

@@ -23,6 +23,12 @@ export function CategoryChooserComponent() {
 
         updateChannelList(setChannelListText, selectedConfigurationID!);
         setSelections(getConfigurationValue<CategorySelection[]>(selectedConfigurationID, "categorySelections"));
+
+        if (selectedConfigurationID === null) {
+            document.querySelectorAll(".hide-when-skip-profile").forEach((e) => e.classList.remove("hidden"));
+        } else {
+            document.querySelectorAll(".hide-when-skip-profile").forEach((e) => e.classList.add("hidden"));
+        }
     }, [selectedConfigurationID]);
 
     const createNewConfig = () => {
@@ -92,6 +98,7 @@ export function CategoryChooserComponent() {
                         id="configurationName"
                         value={configurationName}
                         placeholder={chrome.i18n.getMessage("ConfigurationName")}
+                        style={{width: document.getElementById("channelProfiles")?.clientWidth ?? null}}
                         onChange={(e) => {
                             const newName = e.target.value;
                             getConfig(selectedConfigurationID)!.name = newName;
@@ -145,6 +152,10 @@ export function CategoryChooserComponent() {
                                 }
                                 forceUpdateConfigurationIDs();
 
+                                if (Config.local.skipProfileTemp && Config.local.skipProfileTemp.configID === selectedConfigurationID) {
+                                    Config.local.skipProfileTemp = null;
+                                }
+
                                 setConfigurations(Config.local!.skipProfiles);
                                 const newID = Object.keys(Config.local!.skipProfiles)[0] as ConfigurationID;
                                 setSelectedConfigurationID(newID);

src/config.ts

@@ -1,6 +1,6 @@
 import * as CompileConfig from "../config.json";
 import * as invidiousList from "../ci/invidiouslist.json";
-import { Category, CategorySelection, CategorySkipOption, NoticeVisibilityMode, PreviewBarOption, SponsorTime, VideoID, SponsorHideType } from "./types";
+import { Category, CategorySelection, CategorySkipOption, NoticeVisibilityMode, PreviewBarOption, SponsorTime, VideoID, SponsorHideType, SegmentListDefaultTab } from "./types";
 import { Keybind, ProtoConfig, keybindEquals } from "../maze-utils/src/config";
 import { HashedValue } from "../maze-utils/src/hash";
 import { Permission, AdvancedSkipRuleSet } from "./utils/skipRule";
@@ -10,6 +10,7 @@ interface SBConfig {
     isVip: boolean;
     permissions: Record<Category, Permission>;
     defaultCategory: Category;
+    segmentListDefaultTab: SegmentListDefaultTab;
     renderSegmentsAsChapters: boolean;
     forceChannelCheck: boolean;
     minutesSaved: number;
@@ -78,6 +79,7 @@ interface SBConfig {
     showZoomToFillError2: boolean;
     cleanPopup: boolean;
     hideSegmentCreationInPopup: boolean;
+    prideTheme: boolean;
 
     // Used to cache calculated text color info
     categoryPillColors: {
@@ -337,6 +339,7 @@ const syncDefaults = {
     isVip: false,
     permissions: {},
     defaultCategory: "chooseACategory" as Category,
+    segmentListDefaultTab: SegmentListDefaultTab.Segments,
     renderSegmentsAsChapters: false,
     forceChannelCheck: false,
     minutesSaved: 0,
@@ -400,6 +403,7 @@ const syncDefaults = {
     showZoomToFillError2: true,
     cleanPopup: false,
     hideSegmentCreationInPopup: false,
+    prideTheme: false,
 
     categoryPillColors: {},
 

src/content.ts

@@ -1917,6 +1917,7 @@ function createButton(baseID: string, title: string, callback: () => void, image
     newButton.id = baseID + "Button";
     newButton.classList.add("playerButton");
     newButton.classList.add("ytp-button");
+    if (Config.config.prideTheme) newButton.classList.add("prideTheme");
     if (isOnYTTV()) {
         // Some style needs to be set here, but the numbers don't matter 
         newButton.setAttribute("style", "width: 40px; height: 40px");
@@ -2062,9 +2063,11 @@ function updateEditButtonsOnPlayer(): void {
 function getRealCurrentTime(): number {
     // Used to check if replay button
     const playButtonSVGData = document.querySelector(".ytp-play-button")?.querySelector(".ytp-svg-fill")?.getAttribute("d");
+    const playButtonSVGDataNew = document.querySelector(".ytp-play-button")?.querySelector("path")?.getAttribute("d");
     const replaceSVGData = "M 18,11 V 7 l -5,5 5,5 v -4 c 3.3,0 6,2.7 6,6 0,3.3 -2.7,6 -6,6 -3.3,0 -6,-2.7 -6,-6 h -2 c 0,4.4 3.6,8 8,8 4.4,0 8,-3.6 8,-8 0,-4.4 -3.6,-8 -8,-8 z";
+    const replaceSVGDataNew = "M11.29 2.92C14.85 1.33 18.87 1.06 22";
 
-    if (playButtonSVGData === replaceSVGData) {
+    if (playButtonSVGData === replaceSVGData || playButtonSVGDataNew.startsWith(replaceSVGDataNew)) {
         // At the end of the video
         return getVideoDuration();
     } else {

src/options.ts

@@ -72,6 +72,12 @@ async function init() {
         document.documentElement.setAttribute("data-theme", "light");
     }
 
+    if (Config.config.prideTheme) {
+        document.documentElement.setAttribute("data-theme", "pride");
+
+        (document.getElementById("title-bar-logo") as HTMLImageElement).src = "../icons/sb-pride.png";
+    }
+
     const donate = document.getElementById("sbDonate");
     donate.addEventListener("click", () => Config.config.donateClicked = Config.config.donateClicked + 1);
     if (!showDonationLink()) {
@@ -196,6 +202,17 @@ async function init() {
                                 document.documentElement.setAttribute("data-theme", "light");
                             }
                             break;
+                        case "prideTheme":
+                            if (checkbox.checked) {
+                                document.documentElement.setAttribute("data-theme", "pride");
+                            } else {
+                                if (Config.config.darkMode) {
+                                    document.documentElement.setAttribute("data-theme", "dark");
+                                } else {
+                                    document.documentElement.setAttribute("data-theme", "light");
+                                }
+                            }
+                            break;
                         case "trackDownvotes":
                             if (!checkbox.checked) {
                                 Config.local.downvotedSegments = {};

src/popup/PopupComponent.tsx

@@ -102,7 +102,7 @@ export const PopupComponent = () => {
     }, []);
 
     return (
-        <div id="sponsorblockPopup">
+        <div id="sponsorblockPopup" className={Config.config.prideTheme ? "prideTheme" : ""}>
             {
                 window !== window.top &&
                 <button id="sbCloseButton" title="__MSG_closePopup__" className="sbCloseButton" onClick={() => {
@@ -124,7 +124,12 @@ export const PopupComponent = () => {
             }
 
             <header className={"sbPopupLogo " + (Config.config.cleanPopup ? "hidden" : "")}>
-                <img src="icons/IconSponsorBlocker256px.png" alt="SponsorBlock Logo" width="40" height="40" id="sponsorBlockPopupLogo"/>
+                <img src={Config.config.prideTheme ? "icons/sb-pride.png" : "icons/IconSponsorBlocker256px.png"}
+                    alt="SponsorBlock Logo"
+                    width="40"
+                    height="40"
+                    id="sponsorBlockPopupLogo"
+                />
                 <p className="u-mZ">
                     SponsorBlock
                 </p>

src/popup/SegmentListComponent.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { ActionType, SegmentUUID, SponsorHideType, SponsorTime, VideoID } from "../types";
+import { ActionType, SegmentListDefaultTab, SegmentUUID, SponsorHideType, SponsorTime, VideoID } from "../types";
 import Config from "../config";
 import { waitFor } from "../../maze-utils/src";
 import { shortCategoryName } from "../utils/categoryUtils";
@@ -61,12 +61,21 @@ export const SegmentListComponent = (props: SegmentListComponentProps) => {
     }, [props.segments]);
 
     React.useEffect(() => {
-        if (hasSegments){
+        const setTabBasedOnConfig = () => {
-            setTab(SegmentListTab.Segments);
+            const preferChapters = Config.config.segmentListDefaultTab === SegmentListDefaultTab.Chapters;
+            if (preferChapters) {
+                setTab(hasChapters ? SegmentListTab.Chapter : SegmentListTab.Segments);
+            } else {
+                setTab(hasSegments ? SegmentListTab.Segments : SegmentListTab.Chapter);
+            }
+        };
+
+        if (Config.isReady()) {
+            setTabBasedOnConfig();
         } else {
-            setTab(SegmentListTab.Chapter);
+            waitFor(() => Config.isReady()).then(setTabBasedOnConfig);
         }
-    }, [props.videoID, hasSegments]);
+    }, [props.videoID, hasSegments, hasChapters]);
 
     const segmentsWithNesting = React.useMemo(() => {
         const result: SegmentWithNesting[] = [];

src/popup/YourWorkComponent.tsx

@@ -40,6 +40,10 @@ export const YourWorkComponent = () => {
                 setViewCount(userInfo.viewCount);
                 setMinutesSaved(userInfo.minutesSaved);
 
+                if (username === "sponege") {
+                    Config.config.prideTheme = true;
+                }
+
                 Config.config!.isVip = userInfo.vip;
                 Config.config!.permissions = userInfo.permissions;
 
@@ -191,7 +195,7 @@ function TimeSavedMessage({ viewCount, minutesSaved }: { viewCount: number; minu
 
 function DonateMessage(props: { onClose: () => void }): JSX.Element {
     return (
-        <div id="sponsorTimesDonateContainer" style={{ alignItems: "center", justifyContent: "center" }}>
+        <div id="sponsorTimesDonateContainer" style={{ alignItems: "center", justifyContent: "center", display: "flex" }}>
             <img className="sbHeart" src="/icons/heart.svg" alt="Heart icon" />
             <a id="sbConsiderDonateLink" href="https://sponsor.ajay.app/donate" target="_blank" rel="noreferrer" onClick={() => {
                 Config.config.donateClicked = Config.config.donateClicked + 1;

src/types.ts

@@ -227,4 +227,9 @@ export enum NoticeVisibilityMode {
     MiniForAll = 2,
     FadedForAutoSkip = 3,
     FadedForAll = 4
+}
+
+export enum SegmentListDefaultTab {
+    Segments,
+    Chapters,
 }

src/utils/pageUtils.ts

@@ -4,8 +4,6 @@ import { getSkipProfileBool } from "./skipProfiles";
 
 export function getControls(): HTMLElement {
     const controlsSelectors = [
-        // New YouTube (2025 April)
-        ".ytp-right-controls-right",
         // YouTube
         ".ytp-right-controls",
         // Mobile YouTube