Mirror/SponsorBlock
1
0
Fork 0
mirror of https://github.com/ajayyy/SponsorBlock.git synced 2025-12-20 14:38:28 +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

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;

34
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,15 +305,17 @@
<div class="small-description">__MSG_showTimeWithSkipsDescription__</div>
</div>
<div data-type="toggle" data-sync="cleanPopup">
<div class="switch-container">
<label class="switch">
<input id="cleanPopup" type="checkbox" checked>
<span class="slider round"></span>
</label>
<label class="switch-label" for="cleanPopup">
__MSG_cleanPopup__
</label>
<div>
<div data-type="toggle" data-sync="cleanPopup">
<div class="switch-container">
<label class="switch">
<input id="cleanPopup" type="checkbox" checked>
<span class="slider round"></span>
</label>
<label class="switch-label" for="cleanPopup">
__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">