Mirror/SponsorBlock
1
0
Fork 0
mirror of https://github.com/ajayyy/SponsorBlock.git synced 2025-12-06 19:47:04 +03:00
Code Issues Packages Projects Releases Wiki Activity

Add pride theme

Browse Source
This commit is contained in:
Ajay
2025-10-09 03:10:24 -04:00
parent e1b18944bb
commit fae3a355f5
17 changed files with 363 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
manifest/chrome-manifest-extra.json
View File

@@ -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",

2
manifest/manifest-v2-extra.json
View File

@@ -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",

2
public/_locales

Submodule public/_locales updated: fcee4620b3...daa96aa537

22
public/content.css
View File

@@ -974,3 +974,25 @@ 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);
}

90
public/icons/pride.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
public/icons/sb-pride.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

112
public/options/options.css
View File

@@ -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;

16
public/options/options.html
View File

@@ -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>
@@ -305,6 +305,7 @@
<div class="small-description">__MSG_showTimeWithSkipsDescription__</div>
</div>
<div>
<div data-type="toggle" data-sync="cleanPopup">
<div class="switch-container">
<label class="switch">
@@ -315,6 +316,7 @@
__MSG_cleanPopup__
</label>
</div>
</div>
<br/>
@@ -343,6 +345,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">

73
public/popup.css
View File

@@ -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");
}
/*
@@ -321,12 +342,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 +478,7 @@
}
.sbMediumButton:hover,
.sbMediumButton:focus {
background-color: #ec1c1c;
background-color: var(--sb-red-bg-active-color);
outline: none;
}
.sbMediumButton:active {
@@ -585,7 +616,35 @@
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 {
@@ -663,7 +722,7 @@
top: 80px;
left: 50%;
background-color: #292828;
background-color: var(--sb-skip-profile-bg);
border-radius: 10px;
padding: 10px;
@@ -680,7 +739,7 @@
padding: 5px;
margin: 5px;
background-color: #222;
background-color: var(--sb-skip-profile-option-bg);
border-radius: 5px;
cursor: help;
@@ -697,13 +756,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 {

5
public/shared.css
View File

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

2
src/components/CategoryPillComponent.tsx
View File

@@ -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>
{

11
src/components/NoticeComponent.tsx
View File

@@ -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 &&
(
!Config.config.prideTheme ?
<SbSvg
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}

2
src/config.ts
View File

@@ -78,6 +78,7 @@ interface SBConfig {
showZoomToFillError2: boolean;
cleanPopup: boolean;
hideSegmentCreationInPopup: boolean;
prideTheme: boolean;
// Used to cache calculated text color info
categoryPillColors: {
@@ -400,6 +401,7 @@ const syncDefaults = {
showZoomToFillError2: true,
cleanPopup: false,
hideSegmentCreationInPopup: false,
prideTheme: false,
categoryPillColors: {},

1
src/content.ts
View File

@@ -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");

17
src/options.ts
View File

@@ -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 = {};

9
src/popup/PopupComponent.tsx
View File

@@ -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>

4
src/popup/YourWorkComponent.tsx
View File

@@ -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;