mirror of
https://github.com/ajayyy/SponsorBlock.git
synced 2025-12-25 00:48:26 +03:00
Add pride theme
This commit is contained in:
Ajay
Submodule public/_locales updated: fcee4620b3...daa96aa537
@@ -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);
|
||||
}
|
||||
90
public/icons/pride.svg
Normal file
90
public/icons/pride.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
BIN
public/icons/sb-pride.png
Normal file
BIN
public/icons/sb-pride.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
@@ -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;
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -28,6 +28,11 @@
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.sponsorSkipNoticeTableContainer.prideTheme {
|
||||
background: url("icons/pride.svg");
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.sponsorSkipNotice {
|
||||
transition: all 0.1s ease-out;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user