Mirror/SponsorBlock
1
0
Fork 0
mirror of https://github.com/ajayyy/SponsorBlock.git synced 2026-03-22 21:57:58 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #440 from mbledkowski/master

Browse Source 
Design change of popup.html
This commit is contained in:
Ajay Ramachandran
2020-12-14 01:01:23 -05:00
committed by GitHub
parent 141d8456d8 fd8a3a05fe
commit 57e6268fc7
13 changed files with 753 additions and 925 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
public/_locales/en/messages.json
View File

@@ -86,7 +86,7 @@
"message": "Segment Ends Now"
},
"noVideoID": {
"message": "No YouTube video found at this tab. If you know this is a YouTube tab, close this popup and open it again. If that does not work, try reloading the tab."
"message": "No YouTube video found.\nIf this is incorrect, refresh the tab."
},
"success": {
"message": "Success!"
@@ -122,31 +122,35 @@
"message": "Are you sure you want to submit this?"
},
"whitelistChannel": {
"message": "Whitelist Channel"
"message": "Add to whitelist"
},
"removeFromWhitelist": {
"message": "Remove Channel From Whitelist"
"message": "Remove from whitelist"
},
"voteOnTime": {
"message": "Vote On A Segment"
},
"soFarUHSubmited": {
"message": "So far, you've submitted"
"Submissions": {
"message": "Submissions"
},
"savedPeopleFrom": {
"message": "You have saved people from "
"message": "You've saved people from "
},
"viewLeaderboard": {
"message": "View the leaderboard"
"message": "Leaderboard"
},
"here": {
"message": "here"
},
"recordTimesDescription": {
"message": "Click the button below when the segment starts and ends to record and submit it to the database."
"message": "Submit"
},
"submissionEditHint": {
"message": "Section editing will appear after you click submit",
"description": "Appears in the popup to inform them that editing has been moved to the video player."
},
"popupHint": {
"message": "Hint: Press the semicolon key while focused on a video to report the start/end of a segment and quote to submit. (This can be changed in the options)"
"message": "Hint: You can setup keybinds for submitting in the options"
},
"clearTimesButton": {
"message": "Clear Times"
@@ -157,6 +161,9 @@
"publicStats": {
"message": "This is used on the public stats page to show off how much you've contributed. See it"
},
"Username": {
"message": "Username"
},
"setUsername": {
"message": "Set Username"
},
@@ -253,10 +260,10 @@
"message": "Connection Timeout. Check your internet connection. If your internet is working, the server is probably overloaded or down."
},
"disableSkipping": {
"message": "Disable SponsorBlock"
"message": "Skipping is enabled"
},
"enableSkipping": {
"message": "Enable SponsorBlock"
"message": "Skipping is disabled"
},
"yourWork": {
"message": "Your Work",
@@ -296,7 +303,7 @@
"message": "This time appears in brackets next to the current time on below the seekbar. This shows the total video duration minus any segments. This includes segments marked as only \"Show In Seekbar\"."
},
"youHaveSkipped": {
"message": "You have skipped "
"message": "You've skipped "
},
"youHaveSaved": {
"message": "You have saved yourself "
@@ -314,10 +321,10 @@
"message": "hours"
},
"youHaveSavedTime": {
"message": "You have saved people"
"message": "You've saved people"
},
"youHaveSavedTimeEnd": {
"message": " of their lives."
"message": " of their lives"
},
"statusReminder": {
"message": "Check status.sponsor.ajay.app for server status."
@@ -634,5 +641,8 @@
},
"unsubmittedWarningDescription": {
"message": "Send a notification when you leave a video with segments that are not uploaded"
},
"help": {
"message": "Help"
}
}

1
public/icons/check.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="#fff" d="M20.3 2L9 13.6l-5.3-5L0 12.3 9 21 24 5.7z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 134 B

1
public/icons/pencil.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="#fff" d="M14.1 7.1l2.9 2.9L6.1 20.7l-3.6.7.7-3.6L14.1 7.1zm0-2.8L1.4 16.9 0 24l7.1-1.4L19.8 9.9l-5.7-5.7zm7.1 4.3L24 5.7 18.3 0l-2.8 2.8 5.7 5.7z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 229 B

1
public/icons/settings.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="#fff" d="M24 13.6v-3.2c-1.7-.6-2.7-.8-3.2-2h0c-.5-1.3.1-2.1.8-3.7l-2.3-2.3c-1.6.7-2.4 1.4-3.7.8h0c-1.3-.5-1.4-1.6-2-3.2h-3.2c-.6 1.6-.7 2.7-2 3.2h0c-1.3.5-2.1-.1-3.7-.8L2.4 4.7c.7 1.6 1.4 2.4.8 3.7s-1.6 1.4-3.2 2v3.2c1.6.6 2.7.7 3.2 2 .5 1.3-.1 2.2-.8 3.7l2.3 2.3c1.6-.7 2.4-1.4 3.7-.8h0c1.3.5 1.4 1.6 2 3.2h3.2c.6-1.6.8-2.7 2-3.2h0c1.3-.5 2.1.1 3.7.9l2.3-2.3c-.7-1.6-1.4-2.4-.8-3.7s1.6-1.4 3.2-2zM12 16a4 4 0 1 1 0-8 4 4 0 1 1 0 8z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 516 B

1
public/icons/thumb.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="#fff" d="M21.4 9.6c-1.2 0-2.9-.3-4-.8.8-3.3 1.3-8.8-2.2-8.8-1.8 0-2.3 1.7-2.8 3.3-1.6 5.4-4 6.9-6.4 7.5V10H0v12h6v-.9a19.2 19.2 0 016.2 1.8c1.2.5 3 1.1 5.3 1.1 2.5 0 4.3-1 5-3.7.5-1.9 1.5-7.2 1.5-8.2 0-1.7-1.2-2.5-2.6-2.5zM4 20H2v-8h2v8zm15.9-5.6h1c1.2 0 1.1 1.5 0 1.6h-1.7c-.7.2-.7 1.3.1 1.2h1.2c1 0 1 1.4 0 1.5l-1.7.1c-.8.1-.7 1.3 0 1.2h.8c.9-.1 1 .8-.3 1.6-1.5.9-4.6.1-6.4-.6-2.2-1-4.4-2-7-2v-6c3.3-.8 6.4-2.3 8.4-9.1.9-3.1 1.7-2 1.7.6 0 2-.5 3.8-1 5.5 1.1.5 3.4 1.4 6.2 1.6 1 0 1 1.4 0 1.5l-1.5.2s-.6 1.1.2 1.1z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 599 B

72
public/libs/Source+Sans+Pro.css
View File

@@ -3,7 +3,7 @@
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNa7lqDY.woff2) format('woff2');
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNa7lqDY.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@@ -11,7 +11,7 @@
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xK3dSBYKcSV-LCoeQqfX1RYOo3qPK7lqDY.woff2) format('woff2');
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qPK7lqDY.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@@ -19,7 +19,7 @@
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNK7lqDY.woff2) format('woff2');
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNK7lqDY.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@@ -27,7 +27,7 @@
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xK3dSBYKcSV-LCoeQqfX1RYOo3qO67lqDY.woff2) format('woff2');
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qO67lqDY.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@@ -35,15 +35,15 @@
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xK3dSBYKcSV-LCoeQqfX1RYOo3qN67lqDY.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qN67lqDY.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNq7lqDY.woff2) format('woff2');
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNq7lqDY.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@@ -51,6 +51,62 @@
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2) format('woff2');
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 700;
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmhduz8A.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 700;
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwkxduz8A.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 700;
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmxduz8A.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 700;
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlBduz8A.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 700;
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmBduz8A.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 700;
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmRduz8A.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 700;
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

505
public/popup.css
View File

@@ -1,242 +1,361 @@
/* reset some properties to default (youtube messes with them */
p.popupElement {
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
:root {
--sb-main-bg-color: #222626;
--sb-main-fg-color: white;
--sb-gray-fg-color: #444848;
--sb-on-white-bg: black;
--sb-green-bg: #077B27;
}
h1.popupElement {
margin-block-start: 0.67em;
margin-block-end: 0.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
.hidden {
display: none !important;
}
h2.popupElement {
margin-block-start: 0.83em;
margin-block-end: 0.83em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
#sponsorblockPopup {
color: var(--sb-main-fg-color);
font-family: 'Source Sans Pro', sans-serif;
font-size: 14px;
display: flex;
flex-flow: column nowrap;
align-items: center;
width: 330px;
margin: 22px;
text-align: center;
}
h3.popupElement {
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
#issueReporterTimeButtons > .votingButtons > .segmentTimeButton {
font-weight: bold;
color: var(--sb-main-fg-color);
background: none;
border: none;
padding: 10px 8px;
outline: none;
cursor: pointer;
}
sub.popupElement {
font-size: smaller;
.dot {
height: 10px;
width: 10px;
border-radius: 50%;
display: inline-block;
}
/* end reset */
#sponsorBlockPopupLogo {
vertical-align: text-bottom;
.sponsorTimesThanksForVotingText {
font-size: large;
}
.voteButton {
height: 20px;
padding: 0 5px;
cursor: pointer;
}
#videoInfo>p, #videoInfo>div>p {
margin: 0;
}
div.logoText {
display: flex;
flex-flow: row nowrap;
align-items: center;
color: var(--sb-main-fg-color);
}
div.logoText>p, .sbHeader {
font-size: 32px;
margin: -4px 0 -2px;
font-weight: bold;
}
.sbHeader.sbSubHeader {
font-size: 20px;
}
.largeButton{
background: white;
/*font-weight: bold;*/
padding: 6px 24px;
font-size: 20px;
border-radius: 25px;
border: none;
text-decoration: none;
color: black;
min-height: 26px;
min-width: 152px;
display: block;
overflow: hidden;
text-overflow: ellipsis;
font-family: 'Source Sans Pro', sans-serif;
}
.sponsorBlockPageBody .mediumButton {
background-color:#cc1717;
-moz-border-radius:28px;
-webkit-border-radius:28px;
border-radius:28px;
border: none;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-size:16px;
padding:8px 37px;
text-decoration:none;
text-shadow:0px 0px 0px #662727;
font-family: 'Source Sans Pro', sans-serif;
transition: 0.01s background-color;
}
.sponsorBlockPageBody .mediumButton:hover {
background-color:#ec1c1c;
}
.sponsorBlockPageBody .mediumButton:focus {
outline: none;
background-color:#ec1c1c;
}
.sponsorBlockPageBody .mediumButton:active {
position:relative;
top:1px;
}
/* disable extension */
#disableExtension {
display: flex;
flex-flow: column nowrap;
align-items: center;
}
/* switch button */
.toggleSwitchContainer {
display: flex;
cursor: pointer;
}
.switchBg {
display: block;
height: 37px;
width: 78px;
border-radius: 18.5px;
}
.switchBg.shadow {
background: none;
box-shadow: 0.75px 0.75px 10px 0px rgba(50, 50, 50, 0.5);
opacity: 1;
}
.switchBg.white {
position: absolute;
background: white;
opacity: 1;
}
.switchBg.green {
position: absolute;
background: #00a205;
opacity: 0;
transition: opacity .2s ease-out;
}
.switchDot {
width: 25px;
height: 25px;
margin: 6px;
background: white;
position: absolute;
border-radius: 12.5px;
box-shadow: .75px .75px 3.8px 0px rgba(50, 50, 50, 0.45);
transition: transform .2s ease-out;
}
.preload * {
transition: none !important;
}
#toggleSwitch:checked~.switchDot {
transform: translateX(40px);
}
#toggleSwitch:checked~.switchBg.green {
opacity: 1 !important;
}
#toggleSwitch:checked~.switchBg.white {
opacity: 0 !important;
transition: opacity .2s step-end;
}
.sidebyside {
display: flex;
flex-flow: row nowrap;
width: 88%;
margin: 0 6% 0 6%;
}
.sidebyside>div {
width: 50%;
justify-content: center;
}
#whitelistButton, #sponsorTimesSkipsDoneContainer, .toggleSwitchContainer {
margin-bottom: 2px !important;
}
#whitelistForceCheck {
font-weight: bold;
text-decoration: underline;
font-size: large;
cursor: pointer;
padding: 10px 0;
}
.sbHeader {
margin-bottom: 5px !important;
}
.logoText {
color: white;
margin-bottom: 6px !important;
}
h1.popupElement {
margin-top: 0px;
margin-bottom: 10px;
#videoInfo, #mainControls, .sidebyside, #sponsorTimesSkipsDoneContainer, .largeButton {
margin-bottom: 12px !important;
}
#mainControls{
flex-flow: column;
align-items: center;
}
#submitTimesContainer{
flex-flow: column;
align-items: center;
}
/* additional buttons */
#additionalButtons {
display: flex;
flex-flow: column nowrap;
align-items: center;
}
.popupBody {
font-size: 14px;
background-color: #333;
padding: 0px 5px;
#additionalButtons>button, button#setUsernameButton, #submitUsername {
background: none;
border: none;
color: white;
width: fit-content;
padding-left: 0;
font-family: 'Source Sans Pro', sans-serif;
color: #dddddd;
cursor: pointer;
}
.outerPopupBody {
background-color: #222626;
overflow-y: scroll;
#submitUsername {
padding-left: 5pt;
}
.discreteLink.popupElement {
color: #dddddd;
#additionalButtons, #additionalButtons>button {
font-size: 15px;
}
.recordingSubtitle.popupElement {
margin-bottom: 10px;
#usernameValue, #usernameInput, #sponsorTimesContributionsDisplay{
font-size: 16px;
}
.voteButton.popupElement {
height: 32px;
margin-right: 15px;
cursor: pointer;
}
.voteButton:hover.popupElement {
filter: brightness(80%);
.SBWhitelistIcon {
min-width: 16px;
min-height: 16px;
margin-top: auto;
margin-bottom: auto;
height: 100%;
}
#discordButtonContainer.popupElement {
font-size: 12px;
.SBWhitelistIcon>path {
fill: var(--sb-main-fg-color);
}
.sponsorTime.popupElement {
font-size: 20px;
label>p, #disableExtension>p, #usernameValue, #usernameElement > div > p,#sponsorTimesContributionsContainer > div > p, #usernameElement > div > #setUsername > #setUsernameStatusContainer > p {
margin: 0;
}
.smallLink.popupElement {
font-size: 10px;
text-decoration: underline;
cursor: pointer;
#usernameElement > div > p, #sponsorTimesContributionsContainer {
text-align: start;
}
.mediumLink.popupElement {
font-size: 15px;
margin-left: 25px;
margin-right: 25px;
text-decoration: underline;
cursor: pointer;
.grayedOut>.SBWhitelistIcon>path {
fill: var(--sb-gray-fg-color);
}
.tinyLink.popupElement {
font-size: 10px;
text-decoration: underline;
cursor: pointer;
.grayedOut>label {
color: var(--sb-gray-fg-color);
}
.whitelistButton.popupElement {
background-color:#27a52d;
-moz-border-radius:28px;
-webkit-border-radius:28px;
border-radius:28px;
border: none;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-size:16px;
padding:8px 37px;
text-decoration:none;
text-shadow:0px 0px 0px #27663c;
transition: 0.01s background-color;
}
.whitelistButton:hover.popupElement {
background-color:#3acc3a;
}
.whitelistButton:focus.popupElement {
outline: none;
background-color:#3acc3a;
}
.whitelistButton:active.popupElement {
position:relative;
top:1px;
.SBWhitelistIcon.rotated {
transform: rotate(45deg);
}
.greenButton.popupElement {
background-color:#cc1717;
-moz-border-radius:28px;
-webkit-border-radius:28px;
border-radius:28px;
border: none;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-size:16px;
padding:8px 37px;
text-decoration:none;
text-shadow:0px 0px 0px #662727;
transition: 0.01s background-color;
}
.greenButton:hover.popupElement {
background-color:#ec1c1c;
}
.greenButton:focus.popupElement {
outline: none;
background-color:#ec1c1c;
}
.greenButton:active.popupElement {
position:relative;
top:1px;
.SBWhitelistIconContainer, button#optionsButton>img, .logoText>img, #usernameValue {
margin-right: 8px;
}
.dangerButton.popupElement {
background-color:#bc3315;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
border: none;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-size:13px;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #854629;
}
.dangerButton:hover.popupElement {
background-color:#d0451b;
}
.dangerButton:focus.popupElement {
outline: none;
background-color:#d0451b;
}
.dangerButton:active.popupElement {
position:relative;
top:1px;
#whitelistButton>label, #additionalButtons>button, div#setUsernameContainer {
display: flex;
flex-flow: row nowrap;
}
.warningButton.popupElement {
background-color:#bc8215;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
border: none;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-size:13px;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #856829;
}
.warningButton:hover.popupElement {
background-color:#d0821b;
}
.warningButton:focus.popupElement {
outline: none;
background-color:#d0821b;
}
.warningButton:active.popupElement {
position:relative;
top:1px;
#whitelistButton>label, #additionalButtons>button, div#setUsernameContainer>button {
cursor: pointer;
}
.smallButton.popupElement {
background-color:#f9902d;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
border:1px solid #f9a72d;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-size:14px;
padding:6px 10px;
text-decoration:none;
#usernameElement > div, #sponsorTimesContributionsContainer > div {
display: flex;
flex-flow: column nowrap;
align-items: flex-start;
}
.smallButton:hover.popupElement {
background-color:#fa9806;
.sidebyside > #usernameElement, .sidebyside > #sponsorTimesContributionsContainer {
display: flex;
align-items: center;
}
.smallButton:focus.popupElement {
outline: none;
background-color:#fa9806;
#usernameValue{
overflow: hidden;
text-overflow: ellipsis;
max-width: 130px;
}
#setUsername {
display:flex;
}
#usernameInput {
background: none;
padding: 0;
border: white 1px solid;
color: var(--sb-main-fg-color);
width: calc(100% - 24px);
text-overflow: ellipsis;
}
#setUsername.SBExpanded {
width: 200%;
}
/* footer */
#sbFooter > a {
color: var(--sb-main-fg-color);
text-decoration: none;
}
#showNoticeAgain {
margin-top: 30px;
color: var(--sb-main-fg-color);
background: none;
border: 1px solid white;
cursor: pointer;
padding: 5px;
border-radius: 5px;
}
.smallButton:active.popupElement {
position:relative;
top:1px;
}

339
public/popup.html
View File

@@ -1,203 +1,146 @@
<html>
<head>
<link id="sponsorBlockPopupFont" rel="stylesheet" type="text/css" href="/libs/Source+Sans+Pro.css"/>
<link id="sponsorBlockStyleSheet" rel="stylesheet" type="text/css" href="popup.css"/>
</head>
<head>
<title>__MSG_openPopup__</title>
<link id="sponsorBlockPopupFont" rel="stylesheet" type="text/css" href="/libs/Source+Sans+Pro.css">
<link id="sponsorBlockStyleSheet" rel="stylesheet" type="text/css" href="popup.css">
</head>
<body class="outerPopupBody">
<center>
<div id="app" class="popupBody sponsorBlockPageBody">
<h1 class="popupElement logoText">
<img src="icons/IconSponsorBlocker256px.png" height="32px" id="sponsorBlockPopupLogo"/>
SponsorBlock
</h1>
<!-- Loading text -->
<p id="loadingIndicator" class="popupElement">__MSG_noVideoID__</p>
<!-- Hidden until loading complete -->
<div id="mainControls" class="main popupElement" style="display: none">
<!-- If the video was found in the database -->
<div id="videoFound">
<body style="margin: 0; min-width: 320px; background: var(--sb-main-bg-color);">
<div id="sponsorblockPopup" class="sponsorBlockPageBody preload">
<div class="logoText bottomSpace">
<img src="icons/IconSponsorBlocker256px.png" height="40px" id="sponsorBlockPopupLogo">
<p>SponsorBlock</p>
</div>
<div id="videoInfo" class="bottomSpace">
<div class="bottomSpace">
<!-- Loading text -->
<p id="loadingIndicator">__MSG_noVideoID__</p>
<!-- If the video was found in the database -->
<p id="videoFound"></p>
</div>
<div id="issueReporterContainer">
<div id="issueReporterTimeButtons"></div>
</div>
</div>
<div class="sidebyside">
<div id="disableExtension">
<!--github: mbledkowski/toggle-switch-->
<label for="toggleSwitch" class="toggleSwitchContainer">
<input type="checkbox" style="display:none;" id="toggleSwitch" checked>
<span class="switchBg shadow"></span>
<span class="switchBg white"></span>
<span class="switchBg green"></span>
<span class="switchDot"></span>
</label>
<p id="disableSkipping">__MSG_disableSkipping__</p>
<p id="enableSkipping" style="display: none">__MSG_enableSkipping__</p>
</div>
<div id="additionalButtons">
<!-- grayedOut until loading complete -->
<div id="whitelistButton" class="hidden bottomSpace" title="__MSG_forceChannelCheckPopup__">
<input type="checkbox" style="display:none;" id="whitelistToggle">
<label for="whitelistToggle" class="whitelistToggleText">
<div class="SBWhitelistIconContainer">
<svg viewBox="0 0 24 24" width="16" height="16" class="SBWhitelistIcon">
<path d="M24 10H14V0h-4v10H0v4h10v10h4V14h10z" />
</svg>
</div>
<div id="downloadedSponsorMessageTimes" class="popupElement">
</div>
<p class="popupElement">
__MSG_recordTimesDescription__
</p>
<div>
<button id="sponsorStart" class="greenButton popupElement">__MSG_sponsorStart__</button>
</div>
<sub class="popupElement">__MSG_popupHint__</sub>
<div id="submissionSection" class="popupElement" style="display: none">
<br/>
<b>Sponsor Editing has been moved and will appear after you click submit</b>
<br/>
<div id="submitTimesContainer" class="popupElement" style="display: none">
<button id="submitTimes" class="smallButton popupElement">__MSG_submitTimesButton__</button>
</div>
</div>
<div id="discordButtonContainer" class="popupElement" style="display: none">
<br/>
<a href="https://discord.gg/QnmVMpU" class="popupElement" target="_blank"><img src="https://www.logolynx.com/images/logolynx/1b/1bcc0f0aefe71b2c8ce66ffe8645d365.png" height="32px"/></a>
<br/>
__MSG_discordAdvert__
<br/>
<span id="hideDiscordButton" class="smallLink popupElement">__MSG_hideThis__</span>
</div>
<div>
<br/>
<button id="whitelistChannel" class="whitelistButton popupElement">__MSG_whitelistChannel__</button>
<button id="unwhitelistChannel" class="whitelistButton popupElement" style="display: none">__MSG_removeFromWhitelist__</button>
<div id="whitelistForceCheck" style="text-decoration: underline; cursor: pointer;display: none">
__MSG_forceChannelCheckPopup__
</div>
</div>
<br/>
<button id="reportAnIssue" class="dangerButton popupElement">__MSG_voteOnTime__</button>
<div id="issueReporterContainer" class="popupElement" style="display: none">
<h3 style="margin-top: 0px" class="popupElement">__MSG_voteOnTime__</h3>
<div id="issueReporterTimeButtons" class="popupElement">
</div>
</div>
<br/>
<br/>
</div>
<div>
<button id="disableSkipping" class="greenButton popupElement">__MSG_disableSkipping__</button>
<button id="enableSkipping" class="whitelistButton popupElement" style="display: none">__MSG_enableSkipping__</button>
</div>
<h2 class="recordingSubtitle popupElement">__MSG_yourWork__</h2>
<p class="popupElement">
<span id="sponsorTimesContributionsContainer" class="popupElement" style="display: none">
__MSG_soFarUHSubmited__
<span id="sponsorTimesContributionsDisplay" class="popupElement">
0
</span>
<span id="sponsorTimesContributionsDisplayEndWord" class="popupElement">__MSG_Sponsors__</span>.
</span>
<span id="sponsorTimesViewsContainer" class="popupElement" style="display: none">
__MSG_savedPeopleFrom__
<span id="sponsorTimesViewsDisplay" class="popupElement">
0
</span>
<span id="sponsorTimesViewsDisplayEndWord" class="popupElement">__MSG_Segments__</span>.
</span>
<span id="sponsorTimesOthersTimeSavedContainer" class="popupElement" style="display: none">
__MSG_youHaveSavedTime__
<span id="sponsorTimesOthersTimeSavedDisplay" class="popupElement">
0
</span>
<span id="sponsorTimesOthersTimeSavedEndWord" class="popupElement">__MSG_minsLower__</span>
<span class="popupElement">__MSG_youHaveSavedTimeEnd__</span>
</span>
<div id="sponsorTimesSkipsDoneContainer" class="popupElement" style="display: none">
__MSG_youHaveSkipped__
<span id="sponsorTimesSkipsDoneDisplay" class="popupElement">
0
</span>
<span id="sponsorTimesSkipsDoneEndWord" class="popupElement">__MSG_Segments__</span>
</div>
<div id="sponsorTimeSavedContainer" class="popupElement" style="display: none">
__MSG_youHaveSaved__
<span id="sponsorTimeSavedDisplay" class="popupElement">
0
</span>
<span id="sponsorTimeSavedEndWord" class="popupElement">__MSG_minsLower__</span>.
</br/>
</br/>
</div>
<div class="popupElement">
__MSG_viewLeaderboard__ <a class="popupElement discreteLink" href="https://sponsor.ajay.app/stats" target="_blank">__MSG_here__</a>.
</div>
</p>
<div id="setUsernameContainer" class="popupElement">
<button id="setUsernameButton" class="warningButton popupElement">__MSG_setUsername__</button>
<br/>
<sub class="popupElement">
__MSG_publicStats__ <a class="popupElement discreteLink" href="https://sponsor.ajay.app/stats" target="_blank">__MSG_here__</a>.
</sub>
</div>
<div id="setUsername" class="popupElement" style="display: none">
<h3>__MSG_setUsername__</h3>
<div id="setUsernameStatusContainer" style="display: none">
<h2 id="setUsernameStatus"></h2>
</div>
<input id="usernameInput" hint="Username"></input>
<br/>
<br/>
<button id="submitUsername" class="warningButton popupElement">__MSG_setUsername__</button>
</div>
<div id="optionsButtonContainer" class="popupElement">
<br/>
<br/>
<button id="optionsButton" class="dangerButton popupElement">__MSG_Options__</button>
<br/>
<sub class="popupElement">
__MSG_optionsInfo__
</sub>
<br/>
</div>
<button id="showNoticeAgain" style="display: none" class="dangerButton popupElement">__MSG_showNotice__</button>
<p id="whitelistChannel">__MSG_whitelistChannel__</p>
<p id="unwhitelistChannel" style="display: none">__MSG_removeFromWhitelist__</p>
</label>
</div>
</center>
</body>
<button id="optionsButton" title="__MSG_optionsInfo__">
<img src="/icons/settings.svg" alt="Settings icon" width="16" height="16" id="sbPopupIconSettings">
__MSG_Options__
</button>
</div>
</div>
<div id="whitelistForceCheck" class="hidden">
__MSG_forceChannelCheckPopup__
</div>
<div id="mainControls" style="display: none">
<p class="sbHeader sbSubHeader">
__MSG_recordTimesDescription__
</p>
<sub style="margin-bottom: 12px;">__MSG_popupHint__</sub>
<div>
<button id="sponsorStart" class="mediumButton">__MSG_sponsorStart__</button>
</div>
<div id="submissionSection" style="display: none">
<b style="display: block; margin-top: 12px;">__MSG_submissionEditHint__</b>
<div id="submitTimesContainer" style="display: none; margin-top: 12px;">
<button id="submitTimes" class="mediumButton">__MSG_submitTimesButton__</button>
</div>
</div>
</div>
<h1 class="recordingSubtitle sbHeader sbSubHeader">__MSG_yourWork__</h1>
<div class="sidebyside">
<div id="usernameElement">
<div>
<p>__MSG_Username__:</p>
<div id="setUsernameContainer">
<p id="usernameValue"></p>
<button id="setUsernameButton" title="__MSG_setUsername__">
<img src="/icons/pencil.svg" alt="__MSG_setUsername__" width="16" height="16" id="sbPopupIconEdit">
</button>
</div>
<div id="setUsername" style="display: none">
<div id="setUsernameStatusContainer" style="display: none">
<p id="setUsernameStatus"></p>
</div>
<input id="usernameInput" hint="Username"></input>
<button id="submitUsername">
<img src="/icons/check.svg" alt="__MSG_setUsername__" width="16" height="16" id="sbPopupIconCheck">
</button>
</div>
</div>
</div>
<div id="sponsorTimesContributionsContainer" class="hidden">
<div>
<p>__MSG_Submissions__:</p>
<span id="sponsorTimesContributionsDisplay">
0
</span>
</div>
</div>
</div>
<span id="sponsorTimesViewsContainer" style="display: none">
__MSG_savedPeopleFrom__
<b><span id="sponsorTimesViewsDisplay">
0
</span></b>
<span id="sponsorTimesViewsDisplayEndWord">__MSG_Segments__</span>
<br>
(<b><span id="sponsorTimesOthersTimeSavedDisplay">0</span>
<span id="sponsorTimesOthersTimeSavedEndWord">__MSG_minsLower__</span></b>
<span>__MSG_youHaveSavedTimeEnd__</span>).
</span>
<div id="sponsorTimesSkipsDoneContainer" style="display: none">
__MSG_youHaveSkipped__
<b><span id="sponsorTimesSkipsDoneDisplay">
0
</span></b>
<span id="sponsorTimesSkipsDoneEndWord">__MSG_Segments__</span>
(<b><span id="sponsorTimeSavedDisplay">
0
</span>
<span id="sponsorTimeSavedEndWord">__MSG_minsLower__</span></b>).
</div>
<footer id="sbFooter">
<a href="https://sponsor.ajay.app" target="_blank" rel="noopener">Website</a> |
<a href="https://sponsor.ajay.app/stats" target="_blank" rel="noopener">__MSG_viewLeaderboard__</a> |
<a href="https://github.com/ajayyy/SponsorBlock" target="_blank" rel="noopener">GitHub</a>
<br/>
<a href="https://discord.gg/QnmVMpU" target="_blank" rel="noopener">Discord</a> |
<a href="https://matrix.to/#/+sponsorblock:ajay.app" target="_blank" rel="noopener">Matrix</a> |
<a id="helpButton" href="#">__MSG_help__</a>
</footer>
<button id="showNoticeAgain" style="display: none" class="dangerButton popupElement">__MSG_showNotice__</button>
</div>
<!-- Scripts that need to load after the html -->
<script src="./js/vendor.js"></script>
<script src="./js/popup.js"></script>
</html>
<script src="./js/vendor.js" async></script>
<script src="./js/popup.js" async></script>
</body>