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

show version + clickable labels

Browse Source
This commit is contained in:
Áron Hegymegi-Kiss
2021-12-13 12:14:51 +01:00
parent 4971824067
commit 9a9e564dbf
3 changed files with 88 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
public/options/options.css
View File

@@ -18,7 +18,7 @@ body {
.tab-heading:hover {
outline: 3px solid white;
}
.medium-description, .switch-container, .text-label-container, .categoryTableElement {
.medium-description, .switch-container, .optionLabel, .categoryTableElement {
color: white;
}
.small-description, p,li {
@@ -61,7 +61,7 @@ h1,h2,h3,h4,h5,h6 {
.tab-heading:hover {
outline: 3px solid #2e2e2e;
}
.medium-description, .switch-container, .text-label-container, .categoryTableElement {
.medium-description, .switch-container, .optionLabel, .categoryTableElement {
color: black;
}
.small-description, p,li {
@@ -119,6 +119,9 @@ html, body {
margin: 0 auto;
border-radius: 15px;
cursor: pointer;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.tab-heading.selected {
@@ -135,7 +138,7 @@ html, body {
border-bottom: inherit;
}
.optionLabel {
.optionLabel, #version {
font-size: 14px;
}
@@ -247,10 +250,6 @@ input[type='number'] {
padding: 4px;
}
.text-label-container {
font-size: 14px;
}
.switch {
position: relative;
display: inline-block;
@@ -529,6 +528,9 @@ svg {
margin: unset;
width: 100%;
}
#version {
font-size: 10px;
}
}
@media only screen and (max-width: 800px) {

125
public/options/options.html
View File

@@ -20,6 +20,7 @@
<div id="title" class="titleBar">
<img src="../icons/LogoSponsorBlocker256px.png" class="profilepic" alt="SponsorBlock logo"/>
SponsorBlock
<div id="version"></div>
</div>
<div class="tab-heading selected" data-for="segment-options">
@@ -59,7 +60,7 @@
</div>
<div id="options">
<div id="options" class="hidden">
<div id="segment-options" class="option-group">
@@ -74,31 +75,30 @@
<div data-type="toggle" data-sync="autoSkipOnMusicVideos">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<input id="autoSkipOnMusicVideos" type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="autoSkipOnMusicVideos">
__MSG_autoSkipOnMusicVideos__
</div>
</label>
</div>
</div>
<div data-type="toggle" data-sync="muteSegments">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<input id="muteSegments" type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="muteSegments">
__MSG_muteSegments__
</div>
</label>
</div>
</div>
<div data-type="number-change" data-sync="minDuration">
<span class="optionLabel">__MSG_minDuration__</span>
<label class="number-container">
<span class="optionLabel">__MSG_minDuration__</span>
<input type="number" step="0.1" min="0">
</label>
@@ -108,12 +108,12 @@
<div data-type="toggle" data-sync="forceChannelCheck">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<input id="forceChannelCheck" type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="forceChannelCheck">
__MSG_forceChannelCheck__
</div>
</label>
</div>
<div class="small-description">__MSG_whatForceChannelCheck__</div>
@@ -122,12 +122,12 @@
<div data-type="toggle" data-sync="refetchWhenNotFound">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<input id="refetchWhenNotFound" type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="refetchWhenNotFound">
__MSG_enableRefetchWhenNotFound__
</div>
</label>
</div>
<div class="small-description">__MSG_whatRefetchWhenNotFound__</div>
@@ -138,9 +138,8 @@
<div id="interface-options" class="option-group hidden">
<div data-type="number-change" data-sync="skipNoticeDuration">
<span class="optionLabel">__MSG_skipNoticeDuration__</span>
<label class="number-container">
<span class="optionLabel">__MSG_skipNoticeDuration__</span>
<input type="number" step="1" min="1">
</label>
@@ -150,19 +149,19 @@
<div data-type="toggle" data-toggle-type="reverse" data-sync="dontShowNotice">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<input id="dontShowNotice" type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="dontShowNotice">
__MSG_showSkipNotice__
</div>
</label>
</div>
</div>
<div data-type="selector" data-sync="noticeVisibilityMode">
<span class="optionLabel">__MSG_noticeVisibilityLabel__</span>
<label class="optionLabel" for="noticeVisibilityMode">__MSG_noticeVisibilityLabel__</label>
<select class="selector-element optionsSelector" >
<select id="noticeVisibilityMode" class="selector-element optionsSelector" >
<option value="0">__MSG_noticeVisibilityMode0__</option>
<option value="1">__MSG_noticeVisibilityMode1__</option>
<option value="2">__MSG_noticeVisibilityMode2__</option>
@@ -174,12 +173,12 @@
<div data-type="toggle" data-toggle-type="reverse" data-sync="hideVideoPlayerControls">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<input id="hideVideoPlayerControls" type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="hideVideoPlayerControls">
__MSG_showButtons__
</div>
</label>
</div>
<div class="small-description">__MSG_hideButtonsDescription__</div>
@@ -188,72 +187,72 @@
<div data-type="toggle" data-toggle-type="reverse" data-sync="hideDeleteButtonPlayerControls" data-dependent-on="hideVideoPlayerControls">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<input id="hideDeleteButtonPlayerControls" type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="hideDeleteButtonPlayerControls">
__MSG_showDeleteButton__
</div>
</label>
</div>
</div>
<div data-type="toggle" data-toggle-type="reverse" data-sync="hideUploadButtonPlayerControls" data-dependent-on="hideVideoPlayerControls">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<input id="hideUploadButtonPlayerControls" type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="hideUploadButtonPlayerControls">
__MSG_showUploadButton__
</div>
</label>
</div>
</div>
<div data-type="toggle" data-toggle-type="reverse" data-sync="hideSkipButtonPlayerControls">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<input id="hideSkipButtonPlayerControls" type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="hideSkipButtonPlayerControls">
__MSG_showSkipButton__
</div>
</label>
</div>
</div>
<div data-type="toggle" data-toggle-type="reverse" data-sync="hideInfoButtonPlayerControls">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<input id="hideInfoButtonPlayerControls" type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="hideInfoButtonPlayerControls">
__MSG_showInfoButton__
</div>
</label>
</div>
</div>
<div data-type="toggle" data-sync="autoHideInfoButton" data-dependent-on="hideInfoButtonPlayerControls">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<input id="autoHideInfoButton" type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="autoHideInfoButton">
__MSG_autoHideInfoButton__
</div>
</label>
</div>
</div>
<div data-type="toggle" data-sync="audioNotificationOnSkip">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<input id="audioNotificationOnSkip" type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="audioNotificationOnSkip">
__MSG_audioNotification__
</div>
</label>
</div>
<div class="small-description">__MSG_audioNotificationDescription__</div>
@@ -262,12 +261,12 @@
<div data-type="toggle" data-sync="showTimeWithSkips">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<input id="showTimeWithSkips" type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="showTimeWithSkips">
__MSG_showTimeWithSkips__
</div>
</label>
</div>
<div class="small-description">__MSG_showTimeWithSkipsDescription__</div>
@@ -276,12 +275,12 @@
<div data-type="toggle" data-toggle-type="reverse" data-sync="showDonationLink" data-no-safari="true">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<input id="showDonationLink" type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="showDonationLink">
__MSG_hideDonationLink__
</div>
</label>
</div>
</div>
@@ -346,12 +345,12 @@
<div data-type="toggle" data-sync="trackViewCount">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<input id="trackViewCount" type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="trackViewCount">
__MSG_enableViewTracking__
</div>
</label>
</div>
<div class="small-description">__MSG_whatViewTracking__</div>
@@ -360,12 +359,12 @@
<div data-type="toggle" data-sync="trackViewCountInPrivate" data-dependent-on="trackViewCount" data-private-only="true">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<input id="trackViewCountInPrivate" type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="trackViewCountInPrivate">
__MSG_enableViewTrackingInPrivate__
</div>
</label>
</div>
</div>
@@ -412,12 +411,12 @@
<div id="support-invidious" data-type="toggle" data-sync="supportInvidious" data-no-safari="true">
<div class="switch-container">
<label class="switch">
<input type="checkbox">
<input id="supportInvidious" type="checkbox">
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="supportInvidious">
__MSG_supportOtherSites__
</div>
</label>
</div>
<div class="small-description">(__MSG_supportedSites__ Invidious, CloudTube)</div>
@@ -463,23 +462,23 @@
<div data-type="toggle" data-sync="testingServer" data-confirm-message="testingServerWarning" data-no-safari="true">
<div class="switch-container">
<label class="switch">
<input type="checkbox">
<input id="testingServer" type="checkbox">
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="testingServer">
__MSG_enableTestingServer__
</div>
</label>
</div>
<div class="small-description">__MSG_whatEnableTestingServer__</div>
</div>
<div data-type="text-change" data-sync="serverAddress" data-dependent-on="testingServer" data-dependent-on-inverted="true">
<div class="text-label-container inline">
<label class="optionLabel inline">
<span class="optionLabel">__MSG_customServerAddress__:</span>
<input class="option-text-box" type="text" style="margin-right:10px">
</div>
</label>
<div class="option-button text-change-set inline low-profile">
__MSG_save__