mirror of
https://github.com/ajayyy/SponsorBlock.git
synced 2024-11-10 01:01:55 +01:00
Ajay Ramachandran
GitHub
commit
a18f431e06
3 changed files with 341 additions and 349 deletions
540
public/popup.css
540
public/popup.css
|
|
@ -1,40 +1,52 @@
|
|||
:root {
|
||||
--sb-main-font-family: "Source Sans Pro", sans-serif;
|
||||
--sb-main-bg-color: #222626;
|
||||
--sb-main-bg-color: #222;
|
||||
--sb-main-fg-color: #fff;
|
||||
--sb-grey-bg-color: #333;
|
||||
--sb-grey-fg-color: #999;
|
||||
--sb-red-bg-color: #cc1717;
|
||||
}
|
||||
|
||||
/*
|
||||
* Container when popup displayed in-page
|
||||
* Generic utilities
|
||||
*/
|
||||
|
||||
#sponsorBlockPopupContainer {
|
||||
.grey-text {
|
||||
color: var(--sb-grey-fg-color);
|
||||
}
|
||||
.white-text {
|
||||
color: var(--sb-main-fg-color);
|
||||
}
|
||||
.sbHeader {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
}
|
||||
#sponsorBlockPopupBody .u-mZ {
|
||||
margin: 0 !important;
|
||||
position: relative;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
#sponsorBlockPopupBody .hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/*
|
||||
* Disable popup max height when displayed in-page
|
||||
* <button> elements that have icons
|
||||
*/
|
||||
|
||||
#sponsorBlockPopupContainer #sponsorBlockPopupHTML {
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* Disable fixed popup width when displayed in-page
|
||||
*/
|
||||
|
||||
#sponsorBlockPopupContainer #sponsorBlockPopupBody {
|
||||
width: auto;
|
||||
}
|
||||
#setUsernameButton,
|
||||
#copyUserID,
|
||||
#submitUsername {
|
||||
color: var(--sb-main-fg-color);
|
||||
background: transparent;
|
||||
width: fit-content;
|
||||
padding: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* Main containers
|
||||
*/
|
||||
|
||||
#sponsorBlockPopupHTML {
|
||||
color-scheme: dark;
|
||||
max-height: 600px;
|
||||
|
|
@ -45,8 +57,8 @@
|
|||
margin: 0;
|
||||
width: 374px;
|
||||
max-width: 100%; /* NOTE: Ensures content doesn't exceed restricted popup widths in Firefox */
|
||||
font-family: var(--sb-main-font-family);
|
||||
font-size: 14px;
|
||||
font-family: var(--sb-main-font-family);
|
||||
background-color: var(--sb-main-bg-color);
|
||||
color: var(--sb-main-fg-color);
|
||||
color-scheme: dark;
|
||||
|
|
@ -64,15 +76,47 @@
|
|||
/*
|
||||
* Disable transition on all elements until the extension has loaded
|
||||
*/
|
||||
|
||||
.sb-preload * {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
/*
|
||||
* Close popup button when displayed in-page
|
||||
* Alert indicating that Beta server is enabled
|
||||
*/
|
||||
#sbBetaServerWarning {
|
||||
padding: 8px;
|
||||
font-size: 1em;
|
||||
font-weight: 700;
|
||||
color: var(--sb-main-fg-color);
|
||||
background-color: var(--sb-red-bg-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/*
|
||||
* Container when popup displayed in-page (content.ts)
|
||||
*/
|
||||
#sponsorBlockPopupContainer {
|
||||
position: relative;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Disable popup max height when displayed in-page (content.ts)
|
||||
*/
|
||||
#sponsorBlockPopupContainer #sponsorBlockPopupHTML {
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* Disable fixed popup width when displayed in-page (content.ts)
|
||||
*/
|
||||
#sponsorBlockPopupContainer #sponsorBlockPopupBody {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
* Close popup button when displayed in-page (top-right corner)
|
||||
*/
|
||||
.sbCloseButton {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
|
|
@ -88,51 +132,34 @@
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
/*
|
||||
* Alert indicating that Beta server is enabled
|
||||
*/
|
||||
|
||||
#sbBetaServerWarning {
|
||||
padding: 8px;
|
||||
font-size: 1em;
|
||||
font-weight: 700;
|
||||
color: var(--sb-main-fg-color);
|
||||
background-color: var(--sb-red-bg-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/*
|
||||
* Header logo
|
||||
*/
|
||||
|
||||
.sbPopupLogo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
user-select: none;
|
||||
padding: 20px 0 10px;
|
||||
padding: 10px 0px 0px;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.sbPopupLogo img {
|
||||
margin-right: 8px;
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Refresh segments button
|
||||
*/
|
||||
|
||||
#refreshSegmentsButton {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
padding: 5px;
|
||||
margin: 5px auto;
|
||||
align-items: center;
|
||||
background: transparent;
|
||||
border-radius: 50%;
|
||||
margin: 5px auto;
|
||||
border: none;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#refreshSegmentsButton:hover {
|
||||
background-color: var(--sb-grey-bg-color);
|
||||
}
|
||||
|
|
@ -140,15 +167,14 @@
|
|||
/*
|
||||
* <details> wrapper around each segment
|
||||
*/
|
||||
|
||||
.votingButtons {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
border-radius: 8px;
|
||||
margin: 4px 16px;
|
||||
}
|
||||
|
||||
.votingButtons[open] {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.votingButtons:hover {
|
||||
background-color: var(--sb-grey-bg-color);
|
||||
}
|
||||
|
|
@ -156,34 +182,46 @@
|
|||
/*
|
||||
* Individual segments summaries (clickable <summary>)
|
||||
*/
|
||||
|
||||
.segmentSummary {
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
padding: 7px;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
white-space: nowrap;
|
||||
font-weight: bold;
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
.segmentSummary > div {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/*
|
||||
* Category dot in segment
|
||||
*/
|
||||
|
||||
.sponsorTimesCategoryColorCircle {
|
||||
margin: 0 8px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
}
|
||||
/*
|
||||
* Category name in segment
|
||||
*/
|
||||
.summaryLabel {
|
||||
overflow-wrap: break-word;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.sbVoteButtonsContainer {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/*
|
||||
* Buttons that appear under a segment on click
|
||||
*/
|
||||
|
||||
.voteButton {
|
||||
height: 20px;
|
||||
padding: 0 5px;
|
||||
|
|
@ -197,7 +235,6 @@
|
|||
/*
|
||||
* "Voted!" text that appears after voting on a segment
|
||||
*/
|
||||
|
||||
.sponsorTimesThanksForVotingText {
|
||||
font-size: large;
|
||||
}
|
||||
|
|
@ -205,111 +242,44 @@
|
|||
/*
|
||||
* Main controls menu
|
||||
*/
|
||||
|
||||
.sbControlsMenu {
|
||||
margin: 16px;
|
||||
margin-top: 6px;
|
||||
border-radius: 8px;
|
||||
background-color: var(--sb-grey-bg-color);
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.sbControlsMenu-item {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
padding: 10px 15px;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sbControlsMenu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
background: transparent;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
flex: 1;
|
||||
padding: 10px 15px;
|
||||
trasition: background-color 0.2s ease-in-out;
|
||||
}
|
||||
.sbControlsMenu-item:hover {
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
.sbControlsMenu-itemIcon {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
/*
|
||||
* "Skipping is enabled" toggle
|
||||
*/
|
||||
|
||||
.toggleSwitchContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.toggleSwitchContainer-switch {
|
||||
display: flex;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.switchBg {
|
||||
display: block;
|
||||
width: 50px;
|
||||
height: 23px;
|
||||
border-radius: 18.5px;
|
||||
}
|
||||
|
||||
.switchBg.shadow {
|
||||
box-shadow: 0.75px 0.75px 10px 0px rgba(50, 50, 50, 0.5);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.switchBg.white {
|
||||
position: absolute;
|
||||
background-color: #ccc;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.switchBg.green {
|
||||
position: absolute;
|
||||
background-color: #00a205;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-out;
|
||||
}
|
||||
|
||||
.switchDot {
|
||||
background-color: var(--sb-main-fg-color);
|
||||
border-radius: 50%;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin: 4px;
|
||||
position: absolute;
|
||||
box-shadow: 0.75px 0.75px 3.8px 0px rgba(50, 50, 50, 0.45);
|
||||
transition: transform 0.2s ease-out;
|
||||
}
|
||||
|
||||
#toggleSwitch:checked ~ .switchDot {
|
||||
transform: translateX(27px);
|
||||
}
|
||||
|
||||
#toggleSwitch:checked ~ .switchBg.green {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#toggleSwitch:checked ~ .switchBg.white {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s step-end;
|
||||
}
|
||||
|
||||
/*
|
||||
* Whitelist add/remove icon
|
||||
*/
|
||||
|
||||
.SBWhitelistIcon > path {
|
||||
fill: var(--sb-main-fg-color);
|
||||
}
|
||||
|
||||
.SBWhitelistIcon.rotated {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
|
|
@ -319,239 +289,255 @@
|
|||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* "Skipping is enabled" toggle
|
||||
*/
|
||||
.toggleSwitchContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.toggleSwitchContainer-switch {
|
||||
display: flex;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.switchBg {
|
||||
width: 50px;
|
||||
height: 23px;
|
||||
display: block;
|
||||
border-radius: 18.5px;
|
||||
}
|
||||
.switchBg.shadow {
|
||||
box-shadow: 0.75px 0.75px 10px 0px rgba(50, 50, 50, 0.5);
|
||||
opacity: 1;
|
||||
}
|
||||
.switchBg.white {
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
background-color: #ccc;
|
||||
}
|
||||
.switchBg.green {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
background-color: #00a205;
|
||||
transition: opacity 0.2s ease-out;
|
||||
}
|
||||
.switchDot {
|
||||
width: 15px;
|
||||
margin: 4px;
|
||||
height: 15px;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
transition: transform 0.2s ease-out;
|
||||
background-color: var(--sb-main-fg-color);
|
||||
box-shadow: 0.75px 0.75px 3.8px 0px rgba(50, 50, 50, 0.45);
|
||||
}
|
||||
#toggleSwitch:checked ~ .switchDot {
|
||||
transform: translateX(27px);
|
||||
}
|
||||
#toggleSwitch:checked ~ .switchBg.green {
|
||||
opacity: 1;
|
||||
}
|
||||
#toggleSwitch:checked ~ .switchBg.white {
|
||||
transition: opacity 0.2s step-end;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Notice that appears when whitelisting a channel, that recommends
|
||||
* enabling the "Force Channel Check Before Skipping" option
|
||||
*/
|
||||
|
||||
#whitelistForceCheck {
|
||||
background-color: #fff3cd;
|
||||
color: #664d03;
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
display: block;
|
||||
color: #664d03;
|
||||
}
|
||||
|
||||
#whitelistForceCheck:hover {
|
||||
background-color: #f2e4b7;
|
||||
}
|
||||
|
||||
/*
|
||||
* Container around the "Segment Starts Now" and "Submit Times" buttons
|
||||
* Submit box
|
||||
*/
|
||||
|
||||
#mainControls {
|
||||
margin-bottom: 12px;
|
||||
margin: 16px;
|
||||
padding: 8px 12px;
|
||||
text-align: left;
|
||||
border-radius: 8px;
|
||||
border: 2px solid var(--sb-grey-bg-color);
|
||||
}
|
||||
|
||||
.sponsorStartHint {
|
||||
display: block;
|
||||
padding: 0 10px 12px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/*
|
||||
* 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: none;
|
||||
font-size: 16px;
|
||||
padding: 8px 16px;
|
||||
border-radius: 28px;
|
||||
display: inline-block;
|
||||
-moz-border-radius: 28px;
|
||||
-webkit-border-radius: 28px;
|
||||
color: var(--sb-main-fg-color);
|
||||
font-size: 16px;
|
||||
padding: 8px 37px;
|
||||
font-family: var(--sb-main-font-family);
|
||||
transition: 0.01s background-color;
|
||||
font-family: var(--sb-main-font-family);
|
||||
background-color: var(--sb-red-bg-color);
|
||||
}
|
||||
|
||||
.sbMediumButton:hover,
|
||||
.sbMediumButton:focus {
|
||||
outline: none;
|
||||
background-color: #ec1c1c;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.sbMediumButton:active {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
/*
|
||||
* "Submit Times" button
|
||||
*/
|
||||
|
||||
#submitTimes {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Heading utility class
|
||||
* Your Work box
|
||||
*/
|
||||
|
||||
.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;
|
||||
margin: 16px;
|
||||
margin-bottom: 8px;
|
||||
border-radius: 8px;
|
||||
border: 2px solid var(--sb-grey-bg-color);
|
||||
}
|
||||
|
||||
.sbYourWorkCols > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-basis: 50%;
|
||||
justify-content: center;
|
||||
border-top: 2px solid var(--sb-grey-bg-color);
|
||||
border-bottom: 2px solid var(--sb-grey-bg-color);
|
||||
}
|
||||
|
||||
/*
|
||||
* <button> elements that have icons
|
||||
*/
|
||||
|
||||
#setUsernameButton,
|
||||
#copyUserID,
|
||||
#submitUsername {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
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: 7px;
|
||||
.sbStatsSentence {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Increase font size of username input and display
|
||||
*/
|
||||
|
||||
#usernameValue,
|
||||
#usernameInput,
|
||||
#sponsorTimesContributionsDisplay {
|
||||
font-size: 16px;
|
||||
flex: 1 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Left align "Username" and "Submissions" labels
|
||||
/*
|
||||
* Improve alignment of username and submissions
|
||||
*/
|
||||
|
||||
#usernameElement > div > p,
|
||||
#usernameElement,
|
||||
#sponsorTimesContributionsContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
}
|
||||
#usernameElement > span,
|
||||
#sponsorTimesContributionsContainer {
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
/*
|
||||
* Enable flexbox for buttons with SVG icon
|
||||
*/
|
||||
|
||||
#setUsernameContainer > button {
|
||||
display: flex;
|
||||
#sponsorTimesContributionsContainer {
|
||||
margin-left: 8px;
|
||||
padding-left: 8px;
|
||||
border-left: 2px solid var(--sb-grey-bg-color);
|
||||
}
|
||||
|
||||
/*
|
||||
* Improve position of "Copy User ID" button
|
||||
* Username
|
||||
*/
|
||||
|
||||
#usernameElement {
|
||||
padding: 8px;
|
||||
}
|
||||
#setUsernameContainer {
|
||||
display: flex;
|
||||
}
|
||||
#setUsernameContainer > button {
|
||||
display: flex;
|
||||
}
|
||||
#setUsernameButton {
|
||||
margin-right: 5px;
|
||||
flex: 0 1;
|
||||
}
|
||||
#submitUsername {
|
||||
padding-left: 16px;
|
||||
}
|
||||
#copyUserID {
|
||||
width: 100%;
|
||||
flex: 0 1;
|
||||
}
|
||||
|
||||
/*
|
||||
* Container around username display and edit
|
||||
*/
|
||||
|
||||
#setUsernameContainer {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/*
|
||||
* Improve alignment of username and submissions
|
||||
*/
|
||||
|
||||
#usernameElement > div,
|
||||
#sponsorTimesContributionsContainer > div {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
/*
|
||||
* Truncate username display
|
||||
*/
|
||||
|
||||
#usernameValue {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 130px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
margin: 0 8px 0 0;
|
||||
max-width: 130px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Set username form container with "expanded" state
|
||||
*/
|
||||
|
||||
#setUsername {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#setUsername.SBExpanded {
|
||||
width: 200%;
|
||||
width: calc(200% - 130px);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/*
|
||||
* 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);
|
||||
border: none;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
width: calc(100% - 68px);
|
||||
text-overflow: ellipsis;
|
||||
color: var(--sb-main-fg-color);
|
||||
background: var(--sb-grey-bg-color);
|
||||
}
|
||||
|
||||
/*
|
||||
* Submissions
|
||||
*/
|
||||
#sponsorTimesContributionsContainer {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Footer
|
||||
*/
|
||||
|
||||
#sbFooter {
|
||||
margin-top: 10px;
|
||||
padding-bottom: 20px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
#sbFooter a {
|
||||
transition: background 0.3s ease !important;
|
||||
color: var(--sb-main-fg-color);
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
border-radius: 4px;
|
||||
background: #333;
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
font-weight: 500;
|
||||
margin: 2px 1px;
|
||||
}
|
||||
#sbFooter a:hover {
|
||||
background: #444;
|
||||
}
|
||||
|
||||
/*
|
||||
* "Show Notice Again" button
|
||||
*/
|
||||
|
||||
#showNoticeAgain {
|
||||
background: transparent;
|
||||
border: 1px solid #fff;
|
||||
|
|
@ -560,15 +546,3 @@
|
|||
margin-bottom: 20px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Generic utilities
|
||||
*/
|
||||
|
||||
#sponsorBlockPopupBody .u-mZ {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
#sponsorBlockPopupBody .hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,20 +23,22 @@
|
|||
<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" class="u-mZ">__MSG_noVideoID__</p>
|
||||
<p id="loadingIndicator" class="u-mZ grey-text">__MSG_noVideoID__</p>
|
||||
<!-- If the video was found in the database -->
|
||||
<p id="videoFound" class="u-mZ"></p>
|
||||
<p id="videoFound" class="u-mZ grey-text"></p>
|
||||
<button id="refreshSegmentsButton" title="__MSG_refreshSegments__">
|
||||
<img src="/icons/refresh.svg" alt="Refresh icon" id="refreshSegments" />
|
||||
</button>
|
||||
<!-- Video Segments -->
|
||||
<div id="issueReporterContainer">
|
||||
<div id="issueReporterTimeButtons"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Toggle Box -->
|
||||
<div class="sbControlsMenu">
|
||||
<label id="whitelistButton" for="whitelistToggle" class="hidden sbControlsMenu-item">
|
||||
<input type="checkbox" style="display:none;" id="whitelistToggle">
|
||||
|
|
@ -68,25 +70,31 @@
|
|||
__MSG_forceChannelCheckPopup__
|
||||
</a>
|
||||
|
||||
<!-- Submit box -->
|
||||
<div id="mainControls" style="display: none">
|
||||
<p class="sbHeader">
|
||||
__MSG_recordTimesDescription__
|
||||
</p>
|
||||
<sub class="sponsorStartHint">__MSG_popupHint__</sub>
|
||||
<div>
|
||||
<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>
|
||||
<button id="submitTimes" class="sbMediumButton">__MSG_submitTimesButton__</button>
|
||||
<sub class="sponsorStartHint grey-text">__MSG_popupHint__</sub>
|
||||
<div align="center" style="margin: 8px 0;">
|
||||
<button id="sponsorStart" class="sbMediumButton" style="margin-right: 8px">__MSG_sponsorStart__</button>
|
||||
<button id="submitTimes" class="sbMediumButton" style="display: none; margin: 0 !important;">__MSG_submitTimesButton__</button>
|
||||
</div>
|
||||
<span id="submissionHint" style="display: none;">__MSG_submissionEditHint__</span>
|
||||
</div>
|
||||
|
||||
<h1 class="recordingSubtitle sbHeader">__MSG_yourWork__</h1>
|
||||
<!-- Your Work box -->
|
||||
<div class="sbYourWorkCols">
|
||||
<div id="usernameElement">
|
||||
<div>
|
||||
<p class="u-mZ">__MSG_Username__:</p>
|
||||
<p class="sbHeader" style="padding: 8px 16px; cursor: pointer;">
|
||||
__MSG_yourWork__
|
||||
</p>
|
||||
<div>
|
||||
<!-- Username -->
|
||||
<div id="usernameElement">
|
||||
<span class="u-mZ grey-text">__MSG_Username__:
|
||||
<!-- loading/errors -->
|
||||
<span id="setUsernameStatus" class="u-mZ white-text" style="display: none"></span>
|
||||
</span>
|
||||
<div id="setUsernameContainer">
|
||||
<p id="usernameValue"></p>
|
||||
<button id="setUsernameButton" title="__MSG_setUsername__">
|
||||
|
|
@ -97,48 +105,48 @@
|
|||
</button>
|
||||
</div>
|
||||
<div id="setUsername" style="display: none">
|
||||
<div id="setUsernameStatusContainer" style="display: none">
|
||||
<p id="setUsernameStatus" class="u-mZ"></p>
|
||||
</div>
|
||||
<input id="usernameInput" placeholder="Username">
|
||||
<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 class="u-mZ">__MSG_Submissions__:</p>
|
||||
<span id="sponsorTimesContributionsDisplay">
|
||||
0
|
||||
</span>
|
||||
<!-- Submissions -->
|
||||
<div id="sponsorTimesContributionsContainer" class="hidden">
|
||||
<p class="u-mZ grey-text">__MSG_Submissions__:</p>
|
||||
<span id="sponsorTimesContributionsDisplay">0</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="sponsorTimesViewsContainer" style="display: none" class="u-mZ">
|
||||
__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>).
|
||||
</p>
|
||||
<p id="sponsorTimesSkipsDoneContainer" style="display: none" class="u-mZ">
|
||||
__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>).
|
||||
</p>
|
||||
<p id="sponsorTimesViewsContainer" style="display: none" class="u-mZ sbStatsSentence">
|
||||
__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>
|
||||
)
|
||||
</p>
|
||||
<p id="sponsorTimesSkipsDoneContainer" style="display: none" class="u-mZ sbStatsSentence">
|
||||
__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>
|
||||
)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<footer id="sbFooter">
|
||||
<div id="sponsorTimesDonateContainer" style="display: none; align-items: center; justify-content: center;">
|
||||
|
|
@ -149,13 +157,13 @@
|
|||
<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> |
|
||||
<a href="https://sponsor.ajay.app/stats" target="_blank" rel="noopener">__MSG_viewLeaderboard__</a> |
|
||||
<a id="helpButton">__MSG_help__</a>
|
||||
<a href="https://sponsor.ajay.app" target="_blank" rel="noopener">__MSG_website__</a>
|
||||
<a href="https://sponsor.ajay.app/stats" target="_blank" rel="noopener">__MSG_viewLeaderboard__</a>
|
||||
<br />
|
||||
<a href="https://github.com/ajayyy/SponsorBlock" target="_blank" rel="noopener">GitHub</a>
|
||||
<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">__MSG_help__</a> |
|
||||
<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 href="https://sponsor.ajay.app/donate" target="_blank" rel="noopener" id="sbDonate">$</a>
|
||||
</footer>
|
||||
|
||||
|
|
|
|||
34
src/popup.ts
34
src/popup.ts
|
|
@ -106,7 +106,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
|
|||
// Username
|
||||
"setUsernameContainer",
|
||||
"setUsernameButton",
|
||||
"setUsernameStatusContainer",
|
||||
"setUsernameStatus",
|
||||
"setUsernameStatus",
|
||||
"setUsername",
|
||||
"usernameInput",
|
||||
|
|
@ -114,7 +114,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
|
|||
"submitUsername",
|
||||
"sbPopupIconCopyUserID",
|
||||
// More
|
||||
"submissionSection",
|
||||
"submissionHint",
|
||||
"mainControls",
|
||||
"loadingIndicator",
|
||||
"videoFound",
|
||||
|
|
@ -448,15 +448,24 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
|
|||
segmentTimeFromToNode.innerText = chrome.i18n.getMessage("full");
|
||||
} else {
|
||||
segmentTimeFromToNode.innerText = utils.getFormattedTime(segmentTimes[i].segment[0], true) +
|
||||
(segmentTimes[i].actionType !== ActionType.Poi
|
||||
? " " + chrome.i18n.getMessage("to") + " " + utils.getFormattedTime(segmentTimes[i].segment[1], true)
|
||||
: "");
|
||||
(segmentTimes[i].actionType !== ActionType.Poi
|
||||
? " " + chrome.i18n.getMessage("to") + " " + utils.getFormattedTime(segmentTimes[i].segment[1], true)
|
||||
: "");
|
||||
}
|
||||
|
||||
segmentTimeFromToNode.style.margin = "5px";
|
||||
|
||||
// for inline-styling purposes
|
||||
const labelContainer = document.createElement("div");
|
||||
labelContainer.appendChild(categoryColorCircle);
|
||||
|
||||
segmentSummary.appendChild(categoryColorCircle);
|
||||
segmentSummary.appendChild(textNode);
|
||||
const span = document.createElement('span');
|
||||
span.className = "summaryLabel";
|
||||
span.appendChild(textNode);
|
||||
labelContainer.appendChild(span);
|
||||
// for inline-styling purposes
|
||||
|
||||
segmentSummary.appendChild(labelContainer);
|
||||
segmentSummary.appendChild(segmentTimeFromToNode);
|
||||
|
||||
const votingButtons = document.createElement("details");
|
||||
|
|
@ -465,7 +474,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
|
|||
//thumbs up and down buttons
|
||||
const voteButtonsContainer = document.createElement("div");
|
||||
voteButtonsContainer.id = "sponsorTimesVoteButtonsContainer" + UUID;
|
||||
voteButtonsContainer.setAttribute("align", "center");
|
||||
voteButtonsContainer.classList.add("sbVoteButtonsContainer");
|
||||
|
||||
const upvoteButton = document.createElement("img");
|
||||
upvoteButton.id = "sponsorTimesUpvoteButtonsContainer" + UUID;
|
||||
|
|
@ -581,7 +590,8 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
|
|||
function updateSegmentEditingUI() {
|
||||
PageElements.sponsorStart.innerText = chrome.i18n.getMessage(creatingSegment ? "sponsorEnd" : "sponsorStart");
|
||||
|
||||
PageElements.submissionSection.style.display = sponsorTimes && sponsorTimes.length > 0 ? "unset" : "none";
|
||||
PageElements.submitTimes.style.display = sponsorTimes && sponsorTimes.length > 0 ? "unset" : "none";
|
||||
PageElements.submissionHint.style.display = sponsorTimes && sponsorTimes.length > 0 ? "unset" : "none";
|
||||
}
|
||||
|
||||
//make the options div visible
|
||||
|
|
@ -624,7 +634,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
|
|||
PageElements.setUsername.style.display = "flex";
|
||||
PageElements.setUsername.classList.add("SBExpanded");
|
||||
|
||||
PageElements.setUsernameStatusContainer.style.display = "none";
|
||||
PageElements.setUsernameStatus.style.display = "none";
|
||||
|
||||
PageElements.sponsorTimesContributionsContainer.classList.add("hidden");
|
||||
}
|
||||
|
|
@ -632,7 +642,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
|
|||
//submit the new username
|
||||
function submitUsername() {
|
||||
//add loading indicator
|
||||
PageElements.setUsernameStatusContainer.style.display = "unset";
|
||||
PageElements.setUsernameStatus.style.display = "unset";
|
||||
PageElements.setUsernameStatus.innerText = chrome.i18n.getMessage("Loading");
|
||||
|
||||
utils.sendRequestToServer("POST", "/api/setUsername?userID=" + Config.config.userID + "&username=" + PageElements.usernameInput.value, function (response) {
|
||||
|
|
@ -645,7 +655,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
|
|||
PageElements.setUsername.classList.remove("SBExpanded");
|
||||
PageElements.usernameValue.innerText = PageElements.usernameInput.value;
|
||||
|
||||
PageElements.setUsernameStatusContainer.style.display = "none";
|
||||
PageElements.setUsernameStatus.style.display = "none";
|
||||
|
||||
PageElements.sponsorTimesContributionsContainer.classList.remove("hidden");
|
||||
} else {
|
||||
|
|
|
|||
Loading…
Reference in a new issue