mirror of
https://github.com/ajayyy/SponsorBlock.git
synced 2025-12-06 19:47:04 +03:00
Merge pull request #1189 from AlecRust/improve-popup
Add menu bar to popup
This commit is contained in:
Ajay Ramachandran
622
public/popup.css
622
public/popup.css
@@ -1,235 +1,255 @@
|
||||
:root {
|
||||
--sb-main-font-family: "Source Sans Pro", sans-serif;
|
||||
--sb-main-bg-color: #222626;
|
||||
--sb-main-fg-color: white;
|
||||
--sb-gray-fg-color: #444848;
|
||||
--sb-on-white-bg: black;
|
||||
--sb-green-bg: #077B27;
|
||||
--sb-main-fg-color: #fff;
|
||||
--sb-grey-bg-color: #333;
|
||||
--sb-red-bg-color: #cc1717;
|
||||
}
|
||||
|
||||
/*
|
||||
* IDs on container element (when inserted in page), <html> element,
|
||||
* <body> element and main container
|
||||
*/
|
||||
|
||||
#sponsorBlockPopupContainer {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
#sponsorBlockPopupHTML {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
#sponsorBlockPopupBody .hidden {
|
||||
display: none !important;
|
||||
#sponsorBlockPopupBody {
|
||||
margin: 0;
|
||||
width: 374px;
|
||||
font-family: var(--sb-main-font-family);
|
||||
font-size: 14px;
|
||||
background-color: var(--sb-main-bg-color);
|
||||
color: var(--sb-main-fg-color);
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
#sponsorblockPopup {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*
|
||||
* Disable transition on all elements until the extension has loaded
|
||||
*/
|
||||
|
||||
.sb-preload * {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
/*
|
||||
* Header logo
|
||||
*/
|
||||
|
||||
.sbPopupLogo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
justify-content: center;
|
||||
user-select: none;
|
||||
padding: 20px 0 10px;
|
||||
}
|
||||
|
||||
.sbPopupLogo img {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Refresh segments button
|
||||
*/
|
||||
|
||||
#refreshSegmentsButton {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
padding: 5px;
|
||||
margin: 5px auto;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#refreshSegmentsButton:hover {
|
||||
background-color: var(--sb-grey-bg-color);
|
||||
}
|
||||
|
||||
/*
|
||||
* Individual segments (<button> elements)
|
||||
*/
|
||||
|
||||
.segmentTimeButton {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
color: var(--sb-main-fg-color);
|
||||
font-weight: bold;
|
||||
padding: 7px;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/*
|
||||
* Category dot in segment
|
||||
*/
|
||||
|
||||
.sponsorTimesCategoryColorCircle {
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.voteButtonsContainer--hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
#sponsorBlockPopupBody {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#sponsorBlockPopupBody {
|
||||
margin: auto;
|
||||
width: 374px;
|
||||
background: var(--sb-main-bg-color);
|
||||
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
#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;
|
||||
padding: 22px;
|
||||
text-align: center;
|
||||
margin-bottom: var(--ytd-margin-6x);
|
||||
}
|
||||
|
||||
#issueReporterTimeButtons > .votingButtons > .segmentTimeButton {
|
||||
font-weight: bold;
|
||||
color: var(--sb-main-fg-color);
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 7px;
|
||||
outline: none;
|
||||
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dot {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Buttons that appear under a segment on click
|
||||
*/
|
||||
|
||||
.voteButton {
|
||||
height: 20px;
|
||||
padding: 0 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/*
|
||||
* "Voted!" text that appears after voting on a segment
|
||||
*/
|
||||
|
||||
.sponsorTimesThanksForVotingText {
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
.voteButton {
|
||||
height: 20px;
|
||||
padding: 0 5px;
|
||||
/*
|
||||
* Main controls menu
|
||||
*/
|
||||
|
||||
.sbControlsMenu {
|
||||
background-color: var(--sb-grey-bg-color);
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.sbControlsMenu-item {
|
||||
background-color: var(--sb-grey-bg-color);
|
||||
border: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#videoInfo>p, #videoInfo>div>p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
div.logoText {
|
||||
user-select: none;
|
||||
padding: 10px 15px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: var(--sb-main-fg-color);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
div.logoText>p, .sbHeader {
|
||||
font-size: 32px;
|
||||
margin: -4px 0 -2px;
|
||||
font-weight: bold;
|
||||
.sbControlsMenu-item:hover {
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
.sbHeader.sbSubHeader {
|
||||
font-size: 20px;
|
||||
.sbControlsMenu-itemIcon {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.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 */
|
||||
/*
|
||||
* "Skipping is enabled" toggle
|
||||
*/
|
||||
|
||||
.toggleSwitchContainer {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.toggleSwitchContainer-switch {
|
||||
display: flex;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.switchBg {
|
||||
display: block;
|
||||
height: 37px;
|
||||
width: 78px;
|
||||
width: 50px;
|
||||
height: 23px;
|
||||
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;
|
||||
background-color: #ccc;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.switchBg.green {
|
||||
position: absolute;
|
||||
background: #00a205;
|
||||
background-color: #00a205;
|
||||
opacity: 0;
|
||||
transition: opacity .2s ease-out;
|
||||
transition: opacity 0.2s ease-out;
|
||||
}
|
||||
|
||||
.switchDot {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin: 6px;
|
||||
background: white;
|
||||
background-color: var(--sb-main-fg-color);
|
||||
border-radius: 50%;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin: 4px;
|
||||
position: absolute;
|
||||
border-radius: 12.5px;
|
||||
box-shadow: .75px .75px 3.8px 0px rgba(50, 50, 50, 0.45);
|
||||
transition: transform .2s ease-out;
|
||||
box-shadow: 0.75px 0.75px 3.8px 0px rgba(50, 50, 50, 0.45);
|
||||
transition: transform 0.2s ease-out;
|
||||
}
|
||||
|
||||
.preload * {
|
||||
transition: none !important;
|
||||
#toggleSwitch:checked ~ .switchDot {
|
||||
transform: translateX(27px);
|
||||
}
|
||||
|
||||
#toggleSwitch:checked~.switchDot {
|
||||
transform: translateX(40px);
|
||||
#toggleSwitch:checked ~ .switchBg.green {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#toggleSwitch:checked~.switchBg.green {
|
||||
opacity: 1 !important;
|
||||
#toggleSwitch:checked ~ .switchBg.white {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s step-end;
|
||||
}
|
||||
|
||||
#toggleSwitch:checked~.switchBg.white {
|
||||
opacity: 0 !important;
|
||||
transition: opacity .2s step-end;
|
||||
/*
|
||||
* Whitelist add/remove icon
|
||||
*/
|
||||
|
||||
.SBWhitelistIcon > path {
|
||||
fill: var(--sb-main-fg-color);
|
||||
}
|
||||
|
||||
.sidebyside {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
width: 88%;
|
||||
margin: 0 6% 0 6%;
|
||||
.SBWhitelistIcon.rotated {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.sidebyside>div {
|
||||
width: 50%;
|
||||
justify-content: center;
|
||||
@keyframes rotate {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
#whitelistButton, #sponsorTimesSkipsDoneContainer, .toggleSwitchContainer {
|
||||
margin-bottom: 2px !important;
|
||||
}
|
||||
/*
|
||||
* Notice that appears when whitelisting a channel, that recommends
|
||||
* enabling the "Force Channel Check Before Skipping" option
|
||||
*/
|
||||
|
||||
#whitelistForceCheck {
|
||||
font-weight: bold;
|
||||
@@ -239,173 +259,249 @@ background-color:#ec1c1c;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.sbHeader {
|
||||
margin-bottom: 5px !important;
|
||||
}
|
||||
/*
|
||||
* Container around the "Segment Starts Now" and "Submit Times" buttons
|
||||
*/
|
||||
|
||||
.logoText {
|
||||
margin-bottom: 6px !important;
|
||||
}
|
||||
|
||||
#videoInfo, #mainControls, .sidebyside, #sponsorTimesSkipsDoneContainer, .largeButton {
|
||||
margin-bottom: 12px !important;
|
||||
}
|
||||
#mainControls{
|
||||
#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;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.sbSlimButton, #additionalButtons>button, button#setUsernameButton, #submitUsername, #copyUserID {
|
||||
background: none;
|
||||
border: none;
|
||||
color: white;
|
||||
width: fit-content;
|
||||
padding-left: 0;
|
||||
/*
|
||||
* Generic buttons used for "Segment Starts Now" and "Submit Times"
|
||||
*/
|
||||
|
||||
.sbMediumButton {
|
||||
background-color: var(--sb-red-bg-color);
|
||||
border: 0;
|
||||
-moz-border-radius: 28px;
|
||||
-webkit-border-radius: 28px;
|
||||
border-radius: 28px;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
color: var(--sb-main-fg-color);
|
||||
font-size: 16px;
|
||||
padding: 8px 37px;
|
||||
font-family: var(--sb-main-font-family);
|
||||
transition: 0.01s background-color;
|
||||
}
|
||||
|
||||
button#setUsernameButton {
|
||||
flex: 0 1;
|
||||
.sbMediumButton:hover,
|
||||
.sbMediumButton:focus {
|
||||
outline: none;
|
||||
background-color: #ec1c1c;
|
||||
}
|
||||
|
||||
.sbMediumButton:active {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
/*
|
||||
* "Submit Times" button
|
||||
*/
|
||||
|
||||
#submitTimes {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Heading utility class
|
||||
*/
|
||||
|
||||
.sbHeader {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin: 10px 0 5px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Side-by-side section of "Your Work"
|
||||
*/
|
||||
|
||||
.sbYourWorkCols {
|
||||
display: flex;
|
||||
margin: 0 20px 12px;
|
||||
}
|
||||
|
||||
.sbYourWorkCols > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 50%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/*
|
||||
* <button> elements that have icons
|
||||
*/
|
||||
|
||||
#setUsernameButton,
|
||||
#submitUsername,
|
||||
#copyUserID {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
color: var(--sb-main-fg-color);
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
/*
|
||||
* Prevent username from wrapping
|
||||
*/
|
||||
|
||||
#setUsernameButton {
|
||||
flex: 0 1;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Set username button
|
||||
*/
|
||||
|
||||
#submitUsername {
|
||||
padding-left: 5pt;
|
||||
padding-left: 7px;
|
||||
}
|
||||
|
||||
#additionalButtons, #additionalButtons>button {
|
||||
font-size: 15px;
|
||||
}
|
||||
/*
|
||||
* Increase font size of username input and display
|
||||
*/
|
||||
|
||||
#usernameValue, #usernameInput, #sponsorTimesContributionsDisplay{
|
||||
#usernameValue,
|
||||
#usernameInput,
|
||||
#sponsorTimesContributionsDisplay {
|
||||
font-size: 16px;
|
||||
flex: 1 0;
|
||||
}
|
||||
|
||||
.SBWhitelistIcon {
|
||||
min-width: 16px;
|
||||
min-height: 16px;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
/*
|
||||
* Left align "Username" and "Submissions" labels
|
||||
*/
|
||||
|
||||
.SBWhitelistIcon>path {
|
||||
fill: var(--sb-main-fg-color);
|
||||
}
|
||||
|
||||
label>p, #disableExtension>p, #usernameValue, #usernameElement > div > p,#sponsorTimesContributionsContainer > div > p, #usernameElement > div > #setUsername > #setUsernameStatusContainer > p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#usernameElement > div > p, #sponsorTimesContributionsContainer {
|
||||
#usernameElement > div > p,
|
||||
#sponsorTimesContributionsContainer {
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.grayedOut>.SBWhitelistIcon>path {
|
||||
fill: var(--sb-gray-fg-color);
|
||||
}
|
||||
/*
|
||||
* Enable flexbox for buttons with SVG icon
|
||||
*/
|
||||
|
||||
.grayedOut>label {
|
||||
color: var(--sb-gray-fg-color);
|
||||
}
|
||||
|
||||
.SBWhitelistIcon.rotated {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.SBWhitelistIconContainer, button#optionsButton {
|
||||
#setUsernameContainer > button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.SBWhitelistIconContainer, button#optionsButton>img, .logoText>img, #usernameValue {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
#whitelistButton>label, #additionalButtons>button, div#setUsernameContainer>button {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
}
|
||||
|
||||
.sbSlimButton, #whitelistButton>label, #additionalButtons>button, div#setUsernameContainer>button {
|
||||
cursor: pointer;
|
||||
}
|
||||
/*
|
||||
* Improve position of "Copy User ID" button
|
||||
*/
|
||||
|
||||
#copyUserID {
|
||||
width: 100%;
|
||||
flex: 0 1;
|
||||
}
|
||||
|
||||
/*
|
||||
* Container around username display and edit
|
||||
*/
|
||||
|
||||
#setUsernameContainer {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#usernameElement > div, #sponsorTimesContributionsContainer > div {
|
||||
/*
|
||||
* Improve alignment of username and submissions
|
||||
*/
|
||||
|
||||
#usernameElement > div,
|
||||
#sponsorTimesContributionsContainer > div {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.sidebyside > #usernameElement, .sidebyside > #sponsorTimesContributionsContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
/*
|
||||
* Truncate username display
|
||||
*/
|
||||
|
||||
#usernameValue{
|
||||
#usernameValue {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 130px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Set username form container with "expanded" state
|
||||
*/
|
||||
|
||||
#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;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#setUsername.SBExpanded {
|
||||
width: 200%;
|
||||
}
|
||||
|
||||
/* footer */
|
||||
/*
|
||||
* Set username input
|
||||
*/
|
||||
|
||||
#usernameInput {
|
||||
background: transparent;
|
||||
padding: 2px;
|
||||
border: var(--sb-main-fg-color) 1px solid;
|
||||
color: var(--sb-main-fg-color);
|
||||
width: calc(100% - 24px);
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/*
|
||||
* Footer
|
||||
*/
|
||||
|
||||
#sbFooter {
|
||||
margin-top: 10px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
#sbFooter a {
|
||||
color: var(--sb-main-fg-color);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* "Show Notice Again" button
|
||||
*/
|
||||
|
||||
#showNoticeAgain {
|
||||
margin-top: 30px;
|
||||
|
||||
color: var(--sb-main-fg-color);
|
||||
background: none;
|
||||
border: 1px solid white;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
|
||||
background: transparent;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 5px;
|
||||
color: var(--sb-main-fg-color);
|
||||
cursor: pointer;
|
||||
margin-bottom: 20px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Generic spacing classes
|
||||
*/
|
||||
|
||||
.u-mZ {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
/*
|
||||
* Generic hide utility classes
|
||||
*/
|
||||
|
||||
#sponsorBlockPopupBody .hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.voteButtonsContainer--hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -1,92 +1,86 @@
|
||||
<!DOCTYPE html>
|
||||
<html id="sponsorBlockPopupHTML">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<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">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link id="sponsorBlockPopupFont" href="/libs/Source+Sans+Pro.css" rel="stylesheet">
|
||||
<link id="sponsorBlockStyleSheet" href="popup.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body id="sponsorBlockPopupBody">
|
||||
<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">
|
||||
<div id="sponsorblockPopup" class="sponsorBlockPageBody sb-preload">
|
||||
|
||||
<header class="sbPopupLogo">
|
||||
<img src="icons/IconSponsorBlocker256px.png" alt="SponsorBlock" width="40" height="40" id="sponsorBlockPopupLogo">
|
||||
<p class="u-mZ">SponsorBlock</p>
|
||||
</header>
|
||||
|
||||
<div id="videoInfo">
|
||||
<!-- Loading text -->
|
||||
<p id="loadingIndicator">__MSG_noVideoID__</p>
|
||||
<p id="loadingIndicator" class="u-mZ">__MSG_noVideoID__</p>
|
||||
<!-- If the video was found in the database -->
|
||||
<p id="videoFound"></p>
|
||||
<button class="sbSlimButton" id="refreshSegmentsButton" title="__MSG_refreshSegments__">
|
||||
<img id="refreshSegments" src="/icons/refresh.svg"/>
|
||||
<p id="videoFound" class="u-mZ"></p>
|
||||
<button id="refreshSegmentsButton" title="__MSG_refreshSegments__">
|
||||
<img src="/icons/refresh.svg" alt="Refresh icon" id="refreshSegments" />
|
||||
</button>
|
||||
</div>
|
||||
<div id="issueReporterContainer">
|
||||
<div id="issueReporterTimeButtons"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebyside">
|
||||
<div id="disableExtension">
|
||||
|
||||
<div class="sbControlsMenu">
|
||||
<label id="whitelistButton" for="whitelistToggle" class="hidden sbControlsMenu-item" title="__MSG_forceChannelCheckPopup__">
|
||||
<input type="checkbox" style="display:none;" id="whitelistToggle">
|
||||
<svg viewBox="0 0 24 24" width="23" height="23" class="SBWhitelistIcon sbControlsMenu-itemIcon">
|
||||
<path d="M24 10H14V0h-4v10H0v4h10v10h4V14h10z" />
|
||||
</svg>
|
||||
<span id="whitelistChannel">__MSG_whitelistChannel__</span>
|
||||
<span id="unwhitelistChannel" style="display: none">__MSG_removeFromWhitelist__</span>
|
||||
</label>
|
||||
<!--github: mbledkowski/toggle-switch-->
|
||||
<label for="toggleSwitch" class="toggleSwitchContainer">
|
||||
<label id="disableExtension" for="toggleSwitch" class="toggleSwitchContainer sbControlsMenu-item">
|
||||
<span class="toggleSwitchContainer-switch">
|
||||
<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>
|
||||
</span>
|
||||
<span id="disableSkipping">__MSG_disableSkipping__</span>
|
||||
<span id="enableSkipping" style="display: none">__MSG_enableSkipping__</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>
|
||||
<p id="whitelistChannel">__MSG_whitelistChannel__</p>
|
||||
<p id="unwhitelistChannel" style="display: none">__MSG_removeFromWhitelist__</p>
|
||||
</label>
|
||||
</div>
|
||||
<button id="optionsButton" title="__MSG_optionsInfo__">
|
||||
<img src="/icons/settings.svg" alt="Settings icon" width="16" height="16" id="sbPopupIconSettings">
|
||||
<button id="optionsButton" class="sbControlsMenu-item" title="__MSG_optionsInfo__">
|
||||
<img src="/icons/settings.svg" alt="Settings icon" width="23" height="23" class="sbControlsMenu-itemIcon" id="sbPopupIconSettings" />
|
||||
__MSG_Options__
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="whitelistForceCheck" class="hidden">
|
||||
<p id="whitelistForceCheck" class="u-mZ hidden">
|
||||
__MSG_forceChannelCheckPopup__
|
||||
</div>
|
||||
</p>
|
||||
|
||||
<div id="mainControls" style="display: none">
|
||||
<p class="sbHeader sbSubHeader">
|
||||
<p class="sbHeader">
|
||||
__MSG_recordTimesDescription__
|
||||
</p>
|
||||
<sub style="margin-bottom: 12px;">__MSG_popupHint__</sub>
|
||||
<div>
|
||||
<button id="sponsorStart" class="mediumButton">__MSG_sponsorStart__</button>
|
||||
<button id="sponsorStart" class="sbMediumButton">__MSG_sponsorStart__</button>
|
||||
</div>
|
||||
<div id="submissionSection" style="display: none">
|
||||
<b style="display: block; margin-top: 12px;">__MSG_submissionEditHint__</b>
|
||||
<div id="submitTimesContainer" style="margin-top: 12px;">
|
||||
<button id="submitTimes" class="mediumButton">__MSG_submitTimesButton__</button>
|
||||
<button id="submitTimes" class="sbMediumButton">__MSG_submitTimesButton__</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="recordingSubtitle sbHeader sbSubHeader">__MSG_yourWork__</h1>
|
||||
<div class="sidebyside">
|
||||
|
||||
<h1 class="recordingSubtitle sbHeader">__MSG_yourWork__</h1>
|
||||
<div class="sbYourWorkCols">
|
||||
<div id="usernameElement">
|
||||
<div>
|
||||
<p>__MSG_Username__:</p>
|
||||
<p class="u-mZ">__MSG_Username__:</p>
|
||||
<div id="setUsernameContainer">
|
||||
<p id="usernameValue"></p>
|
||||
<p id="usernameValue" class="u-mZ"></p>
|
||||
<button id="setUsernameButton" title="__MSG_setUsername__">
|
||||
<img src="/icons/pencil.svg" alt="__MSG_setUsername__" width="16" height="16" id="sbPopupIconEdit">
|
||||
</button>
|
||||
@@ -96,9 +90,9 @@
|
||||
</div>
|
||||
<div id="setUsername" style="display: none">
|
||||
<div id="setUsernameStatusContainer" style="display: none">
|
||||
<p id="setUsernameStatus"></p>
|
||||
<p id="setUsernameStatus" class="u-mZ"></p>
|
||||
</div>
|
||||
<input id="usernameInput" hint="Username"></input>
|
||||
<input id="usernameInput" placeholder="Username">
|
||||
<button id="submitUsername">
|
||||
<img src="/icons/check.svg" alt="__MSG_setUsername__" width="16" height="16" id="sbPopupIconCheck">
|
||||
</button>
|
||||
@@ -107,7 +101,7 @@
|
||||
</div>
|
||||
<div id="sponsorTimesContributionsContainer" class="hidden">
|
||||
<div>
|
||||
<p>__MSG_Submissions__:</p>
|
||||
<p class="u-mZ">__MSG_Submissions__:</p>
|
||||
<span id="sponsorTimesContributionsDisplay">
|
||||
0
|
||||
</span>
|
||||
@@ -115,7 +109,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span id="sponsorTimesViewsContainer" style="display: none">
|
||||
<p id="sponsorTimesViewsContainer" style="display: none" class="u-mZ">
|
||||
__MSG_savedPeopleFrom__
|
||||
<b><span id="sponsorTimesViewsDisplay">
|
||||
0
|
||||
@@ -125,8 +119,8 @@
|
||||
(<b><span id="sponsorTimesOthersTimeSavedDisplay">0</span>
|
||||
<span id="sponsorTimesOthersTimeSavedEndWord">__MSG_minsLower__</span></b>
|
||||
<span>__MSG_youHaveSavedTimeEnd__</span>).
|
||||
</span>
|
||||
<div id="sponsorTimesSkipsDoneContainer" style="display: none">
|
||||
</p>
|
||||
<p id="sponsorTimesSkipsDoneContainer" style="display: none" class="u-mZ">
|
||||
__MSG_youHaveSkipped__
|
||||
<b><span id="sponsorTimesSkipsDoneDisplay">
|
||||
0
|
||||
@@ -136,14 +130,15 @@
|
||||
0
|
||||
</span>
|
||||
<span id="sponsorTimeSavedEndWord">__MSG_minsLower__</span></b>).
|
||||
</div>
|
||||
</p>
|
||||
|
||||
<footer id="sbFooter">
|
||||
<div id="sponsorTimesDonateContainer" style="display: none; align-items: center; justify-content: center;">
|
||||
<img class="sbHeart" src="/icons/heart.svg"/>
|
||||
<img class="sbHeart" src="/icons/heart.svg" alt="Heart icon" />
|
||||
<a id="sbConsiderDonateLink" href="https://sponsor.ajay.app/donate" target="_blank" rel="noopener">
|
||||
__MSG_considerDonating__
|
||||
</a>
|
||||
<img id="sbCloseDonate" src="/icons/close.png" height="8px" style="padding-left: 5px; cursor: pointer;"/>
|
||||
<img id="sbCloseDonate" src="/icons/close.png" alt="Close icon" height="8" style="padding-left: 5px; cursor: pointer;" />
|
||||
</div>
|
||||
|
||||
<a href="https://sponsor.ajay.app" target="_blank" rel="noopener">__MSG_website__</a> |
|
||||
@@ -152,11 +147,12 @@
|
||||
<br/>
|
||||
<a href="https://discord.gg/SponsorBlock" target="_blank" rel="noopener">Discord</a> |
|
||||
<a href="https://matrix.to/#/#sponsor:ajay.app?via=ajay.app&via=matrix.org&via=mozilla.org" target="_blank" rel="noopener">Matrix</a> |
|
||||
<a id="helpButton" style="cursor: pointer;">__MSG_help__</a> |
|
||||
<a id="helpButton">__MSG_help__</a> |
|
||||
<a href="https://sponsor.ajay.app/donate" target="_blank" rel="noopener" id="sbDonate">$</a>
|
||||
</footer>
|
||||
|
||||
<button id="showNoticeAgain" style="display: none" class="dangerButton popupElement">__MSG_showNotice__</button>
|
||||
<button id="showNoticeAgain" style="display: none">__MSG_showNotice__</button>
|
||||
|
||||
</div>
|
||||
<!-- Scripts that need to load after the html -->
|
||||
<script src="./js/vendor.js" async></script>
|
||||
|
||||
Reference in New Issue
Block a user