mirror of
https://github.com/ajayyy/SponsorBlock.git
synced 2025-12-06 19:47:04 +03:00
address isssues for pull request
This commit is contained in:
Áron Hegymegi-Kiss
@@ -863,13 +863,9 @@
|
||||
"message": "h",
|
||||
"description": "100h"
|
||||
},
|
||||
"optionsTabCategories": {
|
||||
"message": "Categories",
|
||||
"description": "Appears in Options as a tab header for setting up categories. To fit inside the button, it should not be longer than ~20-25 characters (depending on their width)."
|
||||
},
|
||||
"optionsTabBehavior": {
|
||||
"message": "Behavior",
|
||||
"description": "Appears in Options as a tab header for options related to the general behavior of the extension. To fit inside the button, it should not be longer than ~20-25 characters (depending on their width)."
|
||||
"description": "Appears in Options as a tab header for options related to categories and skipping behavior. To fit inside the button, it should not be longer than ~20-25 characters (depending on their width)."
|
||||
},
|
||||
"optionsTabInterface": {
|
||||
"message": "Interface",
|
||||
@@ -879,16 +875,12 @@
|
||||
"message": "Keyboard shortcuts",
|
||||
"description": "Appears in Options as a tab header for keybinds. To fit inside the button, it should not be longer than ~20-25 characters (depending on their width)."
|
||||
},
|
||||
"optionsTabPrivacy": {
|
||||
"message": "Privacy",
|
||||
"description": "Appears in Options as a tab header for options related to privacy (data stored/sent to server). To fit inside the button, it should not be longer than ~20-25 characters (depending on their width)."
|
||||
},
|
||||
"optionsTabBackup": {
|
||||
"message": "Backup/Restore",
|
||||
"description": "Appears in Options as a tab header for options related to saving/restoring your settings. To fit inside the button, it should not be longer than ~20-25 characters (depending on their width)."
|
||||
},
|
||||
"optionsTabAdvanced": {
|
||||
"message": "Advanced",
|
||||
"message": "Miscellaneous",
|
||||
"description": "Appears in Options as a tab header for advanced/niche options. To fit inside the button, it should not be longer than ~20-25 characters (depending on their width)."
|
||||
},
|
||||
"noticeVisibilityLabel": {
|
||||
|
||||
@@ -1,5 +1,31 @@
|
||||
:root {
|
||||
--color-scheme: dark;
|
||||
--background: #333333;
|
||||
--header-color: #212121;
|
||||
--dialog-background: #181818;
|
||||
--dialog-border: white;
|
||||
--text: #c4c4c4;
|
||||
--title: #dad8d8;
|
||||
--disabled: #520000;
|
||||
--black: black;
|
||||
--white: white;
|
||||
}
|
||||
|
||||
[data-theme="light"] {
|
||||
--color-scheme: light;
|
||||
--background: #f9f9f9;
|
||||
--header-color: white;
|
||||
--dialog-background: #f9f9f9;
|
||||
--dialog-border: #282828;
|
||||
--text: #262626;
|
||||
--title: #707070;
|
||||
--disabled: #ffcaca;
|
||||
--black: white;
|
||||
--white: black;
|
||||
}
|
||||
|
||||
html {
|
||||
color-scheme: dark;
|
||||
color-scheme: var(--color-scheme);
|
||||
}
|
||||
|
||||
.bigText {
|
||||
@@ -7,7 +33,7 @@ html {
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #333333;
|
||||
background-color: var(--background);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
@@ -15,6 +41,10 @@ body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.inline {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 60%;
|
||||
margin: auto;
|
||||
@@ -54,7 +84,7 @@ body {
|
||||
vertical-align: middle;
|
||||
|
||||
font-size: 50px;
|
||||
color: #212121;
|
||||
color: var(--header-color);
|
||||
|
||||
padding: 20px;
|
||||
|
||||
@@ -127,8 +157,8 @@ p,li {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
p,li,a {
|
||||
color: #c4c4c4;
|
||||
p,li,a,span,div {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
p,li,code,a {
|
||||
@@ -162,7 +192,7 @@ img {
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
color: #dad8d8;
|
||||
color: var(--title);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -203,21 +233,93 @@ svg {
|
||||
}
|
||||
}
|
||||
|
||||
/* Light mode, if requested */
|
||||
@media only screen and (prefers-color-scheme: light) {
|
||||
html {
|
||||
color-scheme: light;
|
||||
/* keybind dialog */
|
||||
.key {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: 5px;
|
||||
display: inline-block;
|
||||
min-width: 33px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
border-color: var(--white);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
background-color: #f9f9f9;
|
||||
|
||||
.unbound, .key {
|
||||
padding: 8px;
|
||||
}
|
||||
p,li,a {
|
||||
color: #262626;
|
||||
|
||||
#keybind-dialog .dialog {
|
||||
position: fixed;
|
||||
border-width: 3px;
|
||||
border-style: solid;
|
||||
border-radius: 15px;
|
||||
max-height: 100vh;
|
||||
width: 400px;
|
||||
overflow-x: auto;
|
||||
z-index: 100;
|
||||
padding: 15px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 14px;
|
||||
background-color: var(--dialog-background);
|
||||
border-color: var(--dialog-border);
|
||||
}
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
color: #707070;
|
||||
|
||||
#change-keybind-buttons {
|
||||
float: right;
|
||||
}
|
||||
#title {
|
||||
|
||||
#change-keybind-buttons > .option-button {
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
#change-keybind-settings {
|
||||
margin: 15px 15px 30px;
|
||||
}
|
||||
|
||||
#change-keybind-settings .key {
|
||||
vertical-align: top;
|
||||
margin: 15px 0 0 40px;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
#change-keybind-error {
|
||||
margin-bottom: 15px;
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.blocker {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 90;
|
||||
background-color: #00000080;
|
||||
}
|
||||
|
||||
.option-button {
|
||||
cursor: pointer;
|
||||
|
||||
background-color: #c00000;
|
||||
padding: 10px;
|
||||
color: white;
|
||||
border-radius: 5px;
|
||||
font-size: 14px;
|
||||
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.option-button:hover:not(.disabled) {
|
||||
background-color: #fc0303;
|
||||
}
|
||||
|
||||
.option-button.disabled {
|
||||
cursor: default;
|
||||
background-color: var(--disabled);
|
||||
color: grey;
|
||||
}
|
||||
@@ -1,101 +1,59 @@
|
||||
/* Options page CSS */
|
||||
|
||||
/* Dark mode CSS, this is the default if unsupported */
|
||||
html {
|
||||
color-scheme: dark;
|
||||
}
|
||||
body {
|
||||
background-color: #333333;
|
||||
}
|
||||
#navigation, #keybind-dialog .dialog {
|
||||
background-color: #181818;
|
||||
color: white;
|
||||
}
|
||||
.tab-heading {
|
||||
background-color: #242424;
|
||||
color: white;
|
||||
}
|
||||
.tab-heading:hover {
|
||||
outline: 3px solid white;
|
||||
}
|
||||
.medium-description, .switch-container, .optionLabel, .categoryTableElement {
|
||||
color: white;
|
||||
}
|
||||
.small-description, p, li, span, div {
|
||||
color: #dfdfdf;
|
||||
}
|
||||
.option-button.disabled {
|
||||
background-color: #520000;
|
||||
color: grey;
|
||||
}
|
||||
.slider {
|
||||
background-color: #707070;
|
||||
}
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
color: #dad8d8;
|
||||
}
|
||||
.option-group > div {
|
||||
border-bottom: 1px solid #484848;
|
||||
border-image: linear-gradient(to right, #484848, #00000000 80%) 1;
|
||||
}
|
||||
.categoryTableElement td {
|
||||
border-top: 1px solid #484848;
|
||||
}
|
||||
.key, #keybind-dialog .dialog {
|
||||
border-color: white;
|
||||
:root {
|
||||
--color-scheme: dark;
|
||||
--background: #333333;
|
||||
--menu-background: #181818;
|
||||
--menu-foreground: white;
|
||||
--dialog-background: #181818;
|
||||
--dialog-border: white;
|
||||
--tab-color: #242424;
|
||||
--tab-hover: white;
|
||||
--description: #dfdfdf;
|
||||
--disabled: #520000;
|
||||
--slider: #707070;
|
||||
--title: #dad8d8;
|
||||
--border-color: #484848;
|
||||
--black: black;
|
||||
--white: white;
|
||||
}
|
||||
|
||||
/* Light mode, if requested */
|
||||
@media only screen and (prefers-color-scheme: light) {
|
||||
html {
|
||||
color-scheme: light;
|
||||
}
|
||||
body {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
#navigation, #keybind-dialog .dialog {
|
||||
background-color: #dbdbdb;
|
||||
color: #212121;
|
||||
}
|
||||
.tab-heading {
|
||||
background-color: #ababab;
|
||||
color: black;
|
||||
}
|
||||
.tab-heading:hover {
|
||||
outline: 3px solid #2e2e2e;
|
||||
[data-theme="light"] {
|
||||
--color-scheme: light;
|
||||
--background: #f9f9f9;
|
||||
--menu-background: #dbdbdb;
|
||||
--menu-foreground: #212121;
|
||||
--dialog-background: #f9f9f9;
|
||||
--dialog-border: #282828;
|
||||
--tab-color: #ababab;
|
||||
--tab-hover: #2e2e2e;
|
||||
--description: #262626;
|
||||
--disabled: #ffcaca;
|
||||
--slider: #bfbebe;
|
||||
--title: #707070;
|
||||
--border-color: #d9d9d9;
|
||||
--black: white;
|
||||
--white: black;
|
||||
}
|
||||
|
||||
.medium-description, .switch-container, .optionLabel, .categoryTableElement {
|
||||
color: black;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.small-description, p, li, span, div {
|
||||
color: #262626;
|
||||
}
|
||||
.option-button.disabled {
|
||||
background-color: #ffcaca;
|
||||
color: grey;
|
||||
}
|
||||
.slider {
|
||||
background-color: #bfbebe;
|
||||
color: var(--description);
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
color: #707070;
|
||||
}
|
||||
.option-group > div {
|
||||
border-bottom: 1px solid #d9d9d9;
|
||||
border-image: linear-gradient(to right, #d9d9d9, #00000000 80%) 1;
|
||||
}
|
||||
.categoryTableElement td {
|
||||
border-top: 1px solid #d9d9d9;
|
||||
}
|
||||
.key, #keybind-dialog .dialog {
|
||||
border-color: black;
|
||||
}
|
||||
color: var(--title);
|
||||
}
|
||||
|
||||
html, body {
|
||||
color-scheme: var(--color-scheme);
|
||||
font-family: sans-serif;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
background-color: var(--background);
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -104,10 +62,9 @@ html, body {
|
||||
|
||||
#options-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#navigation {
|
||||
#menubar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
@@ -117,12 +74,20 @@ html, body {
|
||||
border-radius: 15px;
|
||||
margin: 15px;
|
||||
z-index: 10;
|
||||
background-color: var(--menu-background);
|
||||
color: var(--menu-foreground);
|
||||
}
|
||||
|
||||
#navigation {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.tab-heading {
|
||||
font-size: 18px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
height: 55px;
|
||||
line-height: 55px;
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
border-radius: 15px;
|
||||
@@ -130,6 +95,12 @@ html, body {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
background-color: var(--tab-color);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.tab-heading:hover {
|
||||
outline: 3px solid var(--tab-hover);
|
||||
}
|
||||
|
||||
.tab-heading.selected {
|
||||
@@ -144,6 +115,8 @@ html, body {
|
||||
.option-group > div {
|
||||
min-height: 50px;
|
||||
padding: 20px 0;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
border-image: linear-gradient(to right, var(--border-color), #00000000 80%) 1;
|
||||
}
|
||||
|
||||
.option-group > div:last-child, .option-group > #keybind-dialog {
|
||||
@@ -152,6 +125,7 @@ html, body {
|
||||
|
||||
.optionLabel, #version {
|
||||
font-size: 14px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
div[data-type="keybind-change"] .optionLabel {
|
||||
@@ -172,6 +146,7 @@ input[type='number'] {
|
||||
min-width: 33px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
border-color: var(--white);
|
||||
}
|
||||
|
||||
.unbound, .key {
|
||||
@@ -186,7 +161,7 @@ input[type='number'] {
|
||||
}
|
||||
|
||||
.keybind-buttons:hover {
|
||||
background-color: #00000080;
|
||||
background-color: #00000030;
|
||||
}
|
||||
|
||||
.keybind-buttons > div, .keybind-buttons > span {
|
||||
@@ -206,6 +181,8 @@ input[type='number'] {
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: var(--dialog-background);
|
||||
border-color: var(--dialog-border);
|
||||
}
|
||||
|
||||
#change-keybind-buttons {
|
||||
@@ -291,6 +268,7 @@ input[type='number'] {
|
||||
|
||||
.categoryTableElement td {
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.medium-description {
|
||||
@@ -319,6 +297,8 @@ input[type='number'] {
|
||||
|
||||
.option-button.disabled {
|
||||
cursor: default;
|
||||
background-color: var(--disabled);
|
||||
color: grey;
|
||||
}
|
||||
|
||||
#options {
|
||||
@@ -326,7 +306,7 @@ input[type='number'] {
|
||||
flex-basis: 80%;
|
||||
overflow: auto;
|
||||
text-align: left;
|
||||
padding: 80px 15px 0 3%;
|
||||
padding: 80px 15% 0 3%;
|
||||
box-sizing: border-box;
|
||||
|
||||
transition: padding 0.3s;
|
||||
@@ -378,6 +358,7 @@ input[type='number'] {
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: var(--slider);
|
||||
}
|
||||
|
||||
.animated * {
|
||||
@@ -452,9 +433,13 @@ input:checked + .slider:before {
|
||||
}
|
||||
|
||||
#createdBy {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
margin-top: auto;
|
||||
margin: auto 0 10px 0;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
#createdBy > * {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#title {
|
||||
@@ -463,7 +448,7 @@ input:checked + .slider:before {
|
||||
|
||||
font-size: 40px;
|
||||
|
||||
padding: 20px;
|
||||
padding: 40px 20px;
|
||||
|
||||
text-decoration: none;
|
||||
}
|
||||
@@ -600,20 +585,28 @@ svg {
|
||||
|
||||
|
||||
/* Handle smaller screensizes */
|
||||
@media only screen and (max-width: 1600px){
|
||||
#options {
|
||||
padding-right: 8%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-height: 770px), only screen and (max-width: 1200px) {
|
||||
#options-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
#navigation {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
#menubar {
|
||||
gap: 8px;
|
||||
min-width: unset;
|
||||
max-width: unset;
|
||||
padding: 8px;
|
||||
}
|
||||
#navigation {
|
||||
gap: 8px;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
#options {
|
||||
padding: 0 50px;
|
||||
}
|
||||
@@ -625,24 +618,34 @@ svg {
|
||||
font-size: 16px;
|
||||
padding: 0 10px;
|
||||
margin: 0;
|
||||
flex-grow: 1;
|
||||
}
|
||||
#title {
|
||||
width: 100%;
|
||||
font-size: 30px;
|
||||
padding: 10px;
|
||||
}
|
||||
#title .profilepic {
|
||||
height: 40px;
|
||||
}
|
||||
#createdBy {
|
||||
margin: unset;
|
||||
margin: 10px 0 0 0;
|
||||
height: unset;
|
||||
width: 100%;
|
||||
}
|
||||
#createdBy > div {
|
||||
display: inline-block;
|
||||
}
|
||||
#sbDonate {
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
#version {
|
||||
font-size: 10px;
|
||||
height: 10px;
|
||||
transform: translate(-50px, -5px);
|
||||
}
|
||||
.sticky #navigation {
|
||||
.sticky #menubar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
|
||||
<div id="options-container">
|
||||
|
||||
<div id="navigation" class="center">
|
||||
<div id="menubar" class="center">
|
||||
|
||||
<div id="title" class="titleBar">
|
||||
<img src="../icons/LogoSponsorBlocker256px.png" class="profilepic" alt="SponsorBlock logo"/>
|
||||
@@ -24,10 +24,7 @@
|
||||
<div id="version"></div>
|
||||
</div>
|
||||
|
||||
<div class="tab-heading" data-for="segments">
|
||||
__MSG_optionsTabCategories__
|
||||
</div>
|
||||
|
||||
<div id="navigation">
|
||||
<div class="tab-heading" data-for="behavior">
|
||||
__MSG_optionsTabBehavior__
|
||||
</div>
|
||||
@@ -40,10 +37,6 @@
|
||||
__MSG_optionsTabKeyBinds__
|
||||
</div>
|
||||
|
||||
<div class="tab-heading" data-for="privacy">
|
||||
__MSG_optionsTabPrivacy__
|
||||
</div>
|
||||
|
||||
<div class="tab-heading" data-for="import">
|
||||
__MSG_optionsTabBackup__
|
||||
</div>
|
||||
@@ -51,28 +44,27 @@
|
||||
<div class="tab-heading" data-for="advanced">
|
||||
__MSG_optionsTabAdvanced__
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="createdBy" class="titleBar">
|
||||
<div id="createdBy" class="titleBar">
|
||||
<div>
|
||||
<img src="../icons/newprofilepic.jpg" height="30" class="profilepiccircle" alt="profile picture of creator"/>
|
||||
__MSG_createdBy__
|
||||
<a href="https://ajay.app">Ajay Ramachandran</a>
|
||||
</div>
|
||||
<a href="https://sponsor.ajay.app/donate" target="_blank" rel="noopener" id="sbDonate">(__MSG_Donate__)</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="options" class="hidden">
|
||||
<div id="options">
|
||||
|
||||
<div id="segments" class="option-group hidden">
|
||||
<div id="behavior" class="option-group hidden">
|
||||
|
||||
<div id="category-type" data-type="react-CategoryChooserComponent">
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="behavior" class="option-group hidden">
|
||||
|
||||
<div data-type="toggle" data-sync="autoSkipOnMusicVideos">
|
||||
<div class="switch-container">
|
||||
<label class="switch">
|
||||
@@ -318,36 +310,6 @@
|
||||
|
||||
</div>
|
||||
|
||||
<div id="privacy" class="option-group hidden">
|
||||
|
||||
<div data-type="toggle" data-sync="trackViewCount">
|
||||
<div class="switch-container">
|
||||
<label class="switch">
|
||||
<input id="trackViewCount" type="checkbox" checked>
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
<label class="switch-label" for="trackViewCount">
|
||||
__MSG_enableViewTracking__
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="small-description">__MSG_whatViewTracking__</div>
|
||||
</div>
|
||||
|
||||
<div data-type="toggle" data-sync="trackViewCountInPrivate" data-dependent-on="trackViewCount" data-private-only="true">
|
||||
<div class="switch-container">
|
||||
<label class="switch">
|
||||
<input id="trackViewCountInPrivate" type="checkbox" checked>
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
<label class="switch-label" for="trackViewCountInPrivate">
|
||||
__MSG_enableViewTrackingInPrivate__
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="import" class="option-group hidden">
|
||||
|
||||
<div data-type="private-text-change" data-sync="userID" data-confirm-message="userIDChangeWarning">
|
||||
@@ -440,6 +402,32 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-type="toggle" data-sync="trackViewCount">
|
||||
<div class="switch-container">
|
||||
<label class="switch">
|
||||
<input id="trackViewCount" type="checkbox" checked>
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
<label class="switch-label" for="trackViewCount">
|
||||
__MSG_enableViewTracking__
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="small-description">__MSG_whatViewTracking__</div>
|
||||
</div>
|
||||
|
||||
<div data-type="toggle" data-sync="trackViewCountInPrivate" data-dependent-on="trackViewCount" data-private-only="true">
|
||||
<div class="switch-container">
|
||||
<label class="switch">
|
||||
<input id="trackViewCountInPrivate" type="checkbox" checked>
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
<label class="switch-label" for="trackViewCountInPrivate">
|
||||
__MSG_enableViewTrackingInPrivate__
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-type="button-press" data-sync="copyDebugInformation" data-confirm-message="copyDebugInformation">
|
||||
<div class="option-button trigger-button">
|
||||
__MSG_copyDebugInformation__
|
||||
|
||||
@@ -53,9 +53,9 @@ class KeybindComponent extends React.Component<KeybindProps, KeybindState> {
|
||||
}
|
||||
|
||||
openEditDialog(): void {
|
||||
dialog = document.createElement("div");
|
||||
dialog = parent.document.createElement("div");
|
||||
dialog.id = "keybind-dialog";
|
||||
document.body.prepend(dialog);
|
||||
parent.document.body.prepend(dialog);
|
||||
ReactDOM.render(<KeybindDialogComponent option={this.props.option} closeListener={(updateWith) => this.closeEditDialog(updateWith)} />, dialog);
|
||||
}
|
||||
|
||||
|
||||
@@ -76,10 +76,12 @@ class KeybindDialogComponent extends React.Component<KeybindDialogProps, Keybind
|
||||
}
|
||||
|
||||
componentDidMount(): void {
|
||||
parent.document.addEventListener("keydown", this.keybindKeyPressed);
|
||||
document.addEventListener("keydown", this.keybindKeyPressed);
|
||||
}
|
||||
|
||||
componentWillUnmount(): void {
|
||||
parent.document.removeEventListener("keydown", this.keybindKeyPressed);
|
||||
document.removeEventListener("keydown", this.keybindKeyPressed);
|
||||
}
|
||||
|
||||
|
||||
@@ -371,7 +371,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
|
||||
if (confirm(chrome.i18n.getMessage("enableThisCategoryFirst")
|
||||
.replace("{0}", chrome.i18n.getMessage("category_" + chosenCategory)))) {
|
||||
// Open options page
|
||||
chrome.runtime.sendMessage({message: "openConfig", hash: "segments"});
|
||||
chrome.runtime.sendMessage({message: "openConfig", hash: "behavior"});
|
||||
}
|
||||
|
||||
return;
|
||||
|
||||
@@ -9,6 +9,13 @@ window.addEventListener('DOMContentLoaded', init);
|
||||
async function init() {
|
||||
utils.localizeHtmlPage();
|
||||
|
||||
//switch to light mode when requested, except for Chrome on Linux or older Windows/Mac versions, where Chrome doesn't support themes
|
||||
if (window.matchMedia("(prefers-color-scheme: light)")?.matches &&
|
||||
!(navigator.vendor == "Google Inc." && (navigator.userAgent.includes("Linux") ||
|
||||
navigator.userAgent.includes("Windows NT 6") ||
|
||||
navigator.userAgent.includes("Mac OS X") && navigator.userAgent.match(/Mac OS X [^)]+/)[0] < "Mac OS X 10_14")))
|
||||
document.documentElement.setAttribute("data-theme", "light");
|
||||
|
||||
await utils.wait(() => Config.config !== null);
|
||||
|
||||
if (!showDonationLink()) {
|
||||
|
||||
@@ -13,19 +13,41 @@ import CategoryChooser from "./render/CategoryChooser";
|
||||
import KeybindComponent from "./components/KeybindComponent";
|
||||
import { showDonationLink } from "./utils/configUtils";
|
||||
const utils = new Utils();
|
||||
let embed = false;
|
||||
|
||||
window.addEventListener('DOMContentLoaded', init);
|
||||
|
||||
async function init() {
|
||||
utils.localizeHtmlPage();
|
||||
|
||||
//switch to light mode when requested, except for Chrome on Linux or older Windows/Mac versions, where Chrome doesn't support themes
|
||||
if (window.matchMedia("(prefers-color-scheme: light)")?.matches &&
|
||||
!(navigator.vendor == "Google Inc." && (navigator.userAgent.includes("Linux") ||
|
||||
navigator.userAgent.includes("Windows NT 6") ||
|
||||
navigator.userAgent.includes("Mac OS X") && navigator.userAgent.match(/Mac OS X [^)]+/)[0] < "Mac OS X 10_14")))
|
||||
document.documentElement.setAttribute("data-theme", "light");
|
||||
|
||||
// selected tab
|
||||
if (location.hash != "") {
|
||||
const substr = location.hash.substring(1);
|
||||
let menuItem = document.querySelector(`[data-for='${substr}']`);
|
||||
if (menuItem == null)
|
||||
menuItem = document.querySelector(`[data-for='behavior']`);
|
||||
menuItem.classList.add("selected");
|
||||
} else {
|
||||
document.querySelector(`[data-for='behavior']`).classList.add("selected");
|
||||
}
|
||||
|
||||
document.getElementById("version").innerText = "v. " + chrome.runtime.getManifest().version;
|
||||
|
||||
// Remove header if needed
|
||||
if (window.location.hash === "#embed") {
|
||||
embed = true;
|
||||
for (const element of document.getElementsByClassName("titleBar")) {
|
||||
element.classList.add("hidden");
|
||||
}
|
||||
|
||||
document.getElementById("options").classList.add("embed");
|
||||
createStickyHeader();
|
||||
}
|
||||
|
||||
if (!Config.configListeners.includes(optionsConfigUpdateListener)) {
|
||||
@@ -35,7 +57,7 @@ async function init() {
|
||||
await utils.wait(() => Config.config !== null);
|
||||
|
||||
if (!showDonationLink()) {
|
||||
document.getElementById("sbDonate").style.display = "none";
|
||||
document.getElementById("sbDonate").classList.add("hidden");
|
||||
}
|
||||
|
||||
// Set all of the toggle options to the correct option
|
||||
@@ -102,9 +124,9 @@ async function init() {
|
||||
break;
|
||||
case "showDonationLink":
|
||||
if (checkbox.checked)
|
||||
document.getElementById("sbDonate").style.display = "none";
|
||||
document.getElementById("sbDonate").classList.add("hidden");
|
||||
else
|
||||
document.getElementById("sbDonate").style.display = "unset";
|
||||
document.getElementById("sbDonate").classList.remove("hidden");
|
||||
break;
|
||||
}
|
||||
|
||||
@@ -249,16 +271,6 @@ async function init() {
|
||||
}
|
||||
|
||||
// Tab interaction
|
||||
if (location.hash != "") {
|
||||
const substr = location.hash.substring(1);
|
||||
let menuItem = document.querySelector(`[data-for='${substr}']`);
|
||||
if (menuItem == null)
|
||||
menuItem = document.querySelector(`[data-for='segments']`);
|
||||
menuItem.classList.add("selected");
|
||||
} else {
|
||||
document.querySelector(`[data-for='segments']`).classList.add("selected");
|
||||
}
|
||||
|
||||
const tabElements = document.getElementsByClassName("tab-heading");
|
||||
for (let i = 0; i < tabElements.length; i++) {
|
||||
const tabFor = tabElements[i].getAttribute("data-for");
|
||||
@@ -279,11 +291,8 @@ async function init() {
|
||||
});
|
||||
}
|
||||
|
||||
document.getElementById("version").innerText = "v. " + chrome.runtime.getManifest().version;
|
||||
|
||||
window.onscroll = () => createStickyHeader();
|
||||
|
||||
optionsContainer.classList.remove("hidden");
|
||||
optionsContainer.classList.add("animated");
|
||||
}
|
||||
|
||||
@@ -291,7 +300,7 @@ function createStickyHeader() {
|
||||
const container = document.getElementById("options-container");
|
||||
const options = document.getElementById("options");
|
||||
|
||||
if (window.pageYOffset > 115) {
|
||||
if (window.pageYOffset > 90 && (window.innerHeight <= 770 || window.innerWidth <= 1200) || embed) {
|
||||
if (!container.classList.contains("sticky")) {
|
||||
options.style.marginTop = options.offsetTop.toString()+"px";
|
||||
container.classList.add("sticky");
|
||||
|
||||
Reference in New Issue
Block a user