Skip to content

Commit fae3a35

Browse files
ajayyyajayyy
committed
Add pride theme
1 parent e1b1894 commit fae3a35

17 files changed

Lines changed: 363 additions & 33 deletions

‎manifest/chrome-manifest-extra.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,8 @@
5353
"icons/PlayerInfoIconSponsorBlocker.svg",
5454
"icons/PlayerDeleteIconSponsorBlocker.svg",
5555
"icons/dearrow.svg",
56+
"icons/sb-pride.png",
57+
"icons/pride.svg",
5658
"popup.html",
5759
"popup.css",
5860
"content.css",

‎manifest/manifest-v2-extra.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,8 @@
4545
"icons/PlayerInfoIconSponsorBlocker.svg",
4646
"icons/PlayerDeleteIconSponsorBlocker.svg",
4747
"icons/dearrow.svg",
48+
"icons/sb-pride.png",
49+
"icons/pride.svg",
4850
"popup.html",
4951
"popup.css",
5052
"content.css",

‎public/_locales‎

‎public/content.css‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -973,4 +973,26 @@ input::-webkit-inner-spin-button {
973973

974974
.sponsorblock-chapter-visible {
975975
display: block !important;
976+
}
977+
978+
/* Pride theme */
979+
980+
.playerButton.prideTheme:nth-of-type(1) {
981+
filter: brightness(50%) sepia(100) saturate(100);
982+
}
983+
984+
.playerButton.prideTheme:nth-of-type(2) {
985+
filter: sepia(100) saturate(100) hue-rotate(0deg);
986+
}
987+
988+
.playerButton.prideTheme:nth-of-type(3) {
989+
filter: sepia(100) saturate(100) hue-rotate(45deg);
990+
}
991+
992+
.playerButton.prideTheme:nth-of-type(4) {
993+
filter: sepia(100) saturate(100) invert() hue-rotate(5deg);
994+
}
995+
996+
.playerButton.prideTheme:nth-of-type(5) {
997+
filter: sepia(100) saturate(100) invert() hue-rotate(35deg);
976998
}

‎public/icons/pride.svg‎

Lines changed: 90 additions & 0 deletions
Loading

‎public/icons/sb-pride.png‎

14.6 KB
Loading

‎public/options/options.css‎

Lines changed: 105 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,10 @@
1717
--border-color: #484848;
1818
--black: black;
1919
--white: white;
20+
21+
--selector-red: #c00000;
22+
--selector-red-hover: #fc0303;
23+
--tab-selected: #950000;
2024
}
2125

2226
[data-theme="light"] {
@@ -38,6 +42,10 @@
3842
--white: black;
3943
}
4044

45+
[data-theme="pride"] {
46+
--menu-background: #181818d0;
47+
}
48+
4149
.medium-description, .switch-container, .optionLabel, .categoryTableElement, .promotion-description {
4250
color: var(--white);
4351
}
@@ -58,6 +66,12 @@ html, body {
5866
background-color: var(--background);
5967
}
6068

69+
[data-theme="pride"] body {
70+
background: url("../icons/pride.svg");
71+
background-size: contain;
72+
}
73+
74+
6175
* {
6276
box-sizing: border-box;
6377
}
@@ -107,15 +121,99 @@ html, body {
107121
}
108122

109123
.tab-heading.selected {
110-
background-color: #c00000;
124+
background-color: var(--selector-red);
111125
color: white;
112126
}
113127

114128
.tab-heading:active {
115-
background-color: #950000;
129+
background-color: var(--tab-selected);
116130
color: white;
117131
}
118132

133+
[data-theme="pride"] .tab-heading:nth-of-type(1) {
134+
background-color: #2f0000;
135+
}
136+
[data-theme="pride"] .tab-heading:nth-of-type(2) {
137+
background-color: #3a2000;
138+
}
139+
[data-theme="pride"] .tab-heading:nth-of-type(3) {
140+
background-color: #3e3a00;
141+
}
142+
[data-theme="pride"] .tab-heading:nth-of-type(4) {
143+
background-color: #003e13;
144+
}
145+
[data-theme="pride"] .tab-heading:nth-of-type(5) {
146+
background-color: #00164a;
147+
}
148+
149+
[data-theme="pride"] .tab-heading:hover:nth-of-type(1) {
150+
background-color: #550000;
151+
}
152+
[data-theme="pride"] .tab-heading:hover:nth-of-type(2),
153+
[data-theme="pride"] #category-type tr:nth-of-type(5n) .slider,
154+
[data-theme="pride"] [data-type="toggle"]:nth-of-type(5n) .slider {
155+
background-color: #824700;
156+
}
157+
[data-theme="pride"] .tab-heading:hover:nth-of-type(3),
158+
[data-theme="pride"] #category-type tr:nth-of-type(5n + 1) .slider,
159+
[data-theme="pride"] [data-type="toggle"]:nth-of-type(5n + 1) .slider {
160+
background-color: #867d00;
161+
}
162+
[data-theme="pride"] .tab-heading:hover:nth-of-type(4),
163+
[data-theme="pride"] #category-type tr:nth-of-type(5n + 2) .slider,
164+
[data-theme="pride"] [data-type="toggle"]:nth-of-type(5n + 2) .slider {
165+
background-color: #00691f;
166+
}
167+
[data-theme="pride"] .tab-heading:hover:nth-of-type(5),
168+
[data-theme="pride"] #category-type tr:nth-of-type(5n + 3) .slider,
169+
[data-theme="pride"] [data-type="toggle"]:nth-of-type(5n + 3) .slider {
170+
background-color: #002374;
171+
}
172+
[data-theme="pride"] #category-type tr:nth-of-type(5n + 4) .slider,
173+
[data-theme="pride"] [data-type="toggle"]:nth-of-type(5n + 4) .slider {
174+
background-color: #400449;
175+
}
176+
177+
[data-theme="pride"] #category-type tr .optionsSelector {
178+
color: var(--white);
179+
}
180+
[data-theme="pride"] .tab-heading:nth-of-type(1).selected {
181+
background-color: #E40303;
182+
}
183+
[data-theme="pride"] .tab-heading:nth-of-type(2).selected,
184+
[data-theme="pride"] #category-type tr:nth-of-type(10n + 2) .optionsSelector,
185+
[data-theme="pride"] #category-type tr:nth-of-type(5n) input:checked + .slider,
186+
[data-theme="pride"] [data-type]:nth-of-type(5n) :is(input:checked + .slider, .option-button, .optionsSelector) {
187+
background-color: #dd7a00;
188+
}
189+
[data-theme="pride"] .tab-heading:nth-of-type(3).selected,
190+
[data-theme="pride"] #category-type tr:nth-of-type(10n + 4) .optionsSelector,
191+
[data-theme="pride"] #category-type tr:nth-of-type(2n + 1) .optionsSelector,
192+
[data-theme="pride"] #category-type tr:nth-of-type(5n + 1) input:checked + .slider,
193+
[data-theme="pride"] [data-type]:nth-of-type(5n + 1) :is(input:checked + .slider, .option-button, .optionsSelector) {
194+
background-color: #FFED00;
195+
color: rgb(23, 23, 23);
196+
}
197+
[data-theme="pride"] .tab-heading:nth-of-type(4).selected,
198+
[data-theme="pride"] #category-type tr:nth-of-type(10n + 6) .optionsSelector,
199+
[data-theme="pride"] #category-type tr:nth-of-type(5n + 2) input:checked + .slider,
200+
[data-theme="pride"] [data-type]:nth-of-type(5n + 2) :is(input:checked + .slider, .option-button, .optionsSelector) {
201+
background-color: #008026;
202+
}
203+
[data-theme="pride"] .tab-heading:nth-of-type(5).selected,
204+
[data-theme="pride"] #category-type tr:nth-of-type(10n + 8) .optionsSelector,
205+
[data-theme="pride"] #category-type tr:nth-of-type(5n + 3) input:checked + .slider,
206+
[data-theme="pride"] [data-type]:nth-of-type(5n + 3) :is(input:checked + .slider, .option-button, .optionsSelector) {
207+
background-color: #004DFF;
208+
}
209+
[data-theme="pride"] .tab-heading:nth-of-type(5).selected,
210+
[data-theme="pride"] #category-type tr:nth-of-type(10n + 10) .optionsSelector,
211+
[data-theme="pride"] #category-type tr:nth-of-type(5n + 4) input:checked + .slider,
212+
[data-theme="pride"] [data-type]:nth-of-type(5n + 4) :is(input:checked + .slider, .option-button, .optionsSelector) {
213+
background-color: #750787;
214+
}
215+
216+
119217
.option-group > div, .extraOptionGroup {
120218
min-height: 50px;
121219
padding: 15px 0;
@@ -135,7 +233,7 @@ html, body {
135233
padding: 0;
136234
}
137235

138-
.categoryChooserTable .categoryExtraOptions {
236+
#category-type .categoryExtraOptions {
139237
padding-bottom: 15px;
140238
}
141239

@@ -310,7 +408,7 @@ input[type='number'] {
310408
.option-button {
311409
cursor: pointer;
312410

313-
background-color: #c00000;
411+
background-color: var(--selector-red);
314412
padding: 10px;
315413
color: white;
316414
border-radius: 5px;
@@ -320,7 +418,7 @@ input[type='number'] {
320418
}
321419

322420
.option-button:hover:not(.disabled) {
323-
background-color: #fc0303;
421+
background-color: var(--selector-red-hover);
324422
}
325423

326424
.option-button.disabled {
@@ -430,7 +528,7 @@ input[type='number'] {
430528
}
431529

432530
input:checked + .slider {
433-
background-color: #fc0303;
531+
background-color: var(--selector-red-hover);
434532
}
435533

436534
input:checked + .slider:before {
@@ -611,7 +709,7 @@ svg {
611709
}
612710

613711
.optionsSelector {
614-
background-color: #c00000;
712+
background-color: var(--selector-red);
615713
color: white;
616714

617715
border: none;

‎public/options/options.html‎

Lines changed: 24 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
<div id="menubar" class="center">
2020

2121
<div id="title" class="titleBar">
22-
<img src="../icons/LogoSponsorBlocker256px.png" class="profilepic" alt="SponsorBlock logo"/>
22+
<img id="title-bar-logo" src="../icons/LogoSponsorBlocker256px.png" class="profilepic" alt="SponsorBlock logo"/>
2323
SponsorBlock
2424
<div id="version"></div>
2525
</div>
@@ -305,15 +305,17 @@
305305
<div class="small-description">__MSG_showTimeWithSkipsDescription__</div>
306306
</div>
307307

308-
<div data-type="toggle" data-sync="cleanPopup">
309-
<div class="switch-container">
310-
<label class="switch">
311-
<input id="cleanPopup" type="checkbox" checked>
312-
<span class="slider round"></span>
313-
</label>
314-
<label class="switch-label" for="cleanPopup">
315-
__MSG_cleanPopup__
316-
</label>
308+
<div>
309+
<div data-type="toggle" data-sync="cleanPopup">
310+
<div class="switch-container">
311+
<label class="switch">
312+
<input id="cleanPopup" type="checkbox" checked>
313+
<span class="slider round"></span>
314+
</label>
315+
<label class="switch-label" for="cleanPopup">
316+
__MSG_cleanPopup__
317+
</label>
318+
</div>
317319
</div>
318320

319321
<br/>
@@ -343,6 +345,18 @@
343345
</div>
344346
</div>
345347

348+
<div data-type="toggle" data-sync="prideTheme">
349+
<div class="switch-container">
350+
<label class="switch">
351+
<input id="prideTheme" type="checkbox" checked>
352+
<span class="slider round"></span>
353+
</label>
354+
<label class="switch-label" for="prideTheme">
355+
__MSG_prideTheme__
356+
</label>
357+
</div>
358+
</div>
359+
346360
<div data-type="toggle" data-toggle-type="reverse" data-sync="showNewFeaturePopups">
347361
<div class="switch-container">
348362
<label class="switch">

0 commit comments

Comments
 (0)