diff --git a/public/popup.css b/public/popup.css index 95607215..010c1fcc 100644 --- a/public/popup.css +++ b/public/popup.css @@ -1,6 +1,6 @@ :root { --sb-main-font-family: "Source Sans Pro", sans-serif; - --sb-main-bg-color: #111; + --sb-main-bg-color: #212121; --sb-main-fg-color: #fff; --sb-grey-bg-color: #333; --sb-grey-fg-color: #999; @@ -10,6 +10,9 @@ .grey-text { color: var(--sb-grey-fg-color); } +.white-text { + color: var(--sb-main-fg-color); +} /* * Container when popup displayed in-page @@ -74,25 +77,6 @@ transition: none !important; } -/* - * Close popup button when displayed in-page - */ - -.sbCloseButton { - background: transparent; - border: 0; - padding: 8px; - cursor: pointer; - position: absolute; - top: 5px; - right: 5px; - opacity: 0.5; -} - -.sbCloseButton:hover { - opacity: 1; -} - /* * Alert indicating that Beta server is enabled */ @@ -118,15 +102,34 @@ font-weight: bold; justify-content: center; user-select: none; - padding: 1rem; + padding-top: 16px; } .sbPopupLogo img { - margin: 0.5rem 0; + margin: 0.5rem; +} + +/* + * Close popup button when displayed in-page (top-left corner) + */ + +.sbCloseButton { + background: transparent; + border: 0; + padding: 8px; + cursor: pointer; + position: absolute; + top: 26px; + left: 26px; + opacity: 0.5; +} + +.sbCloseButton:hover { + opacity: 1; } /* - * Options button + * Options button (top-right corner) */ #optionsButton { @@ -141,8 +144,8 @@ right: 26px; padding: 5px; z-index: 69; - height: 2rem; - width: 2rem; + height: 32px; + width: 32px; } #optionsButton svg { transition: transform 0.15s ease-in-out !important; @@ -205,6 +208,8 @@ */ .votingButtons { + margin: 4px 16px; + border-radius: 8px; font-family: Arial, Helvetica, sans-serif; } @@ -221,19 +226,32 @@ */ .segmentSummary { + display: flex; + justify-content: space-between; + align-items: center; cursor: pointer; font-weight: bold; - padding: 7px; + padding: 4px 8px; list-style: none; white-space: nowrap; } +.segmentSummary > div { + text-align: left; +} + +.summaryLabel { + overflow-wrap: break-word !important; + max-width: 50px !important; + white-space: normal; +} + /* * Category dot in segment */ .sponsorTimesCategoryColorCircle { - margin: 0 8px; + margin-right: 8px; } .dot { @@ -266,10 +284,12 @@ */ .sbControlsMenu { - background-color: var(--sb-grey-bg-color); + margin: 16px; + border-radius: 8px; + overflow: hidden; display: flex; justify-content: space-evenly; - margin-top: 10px; + background-color: var(--sb-grey-bg-color); } .sbControlsMenu-item { @@ -283,6 +303,7 @@ flex-direction: column; align-items: center; justify-content: center; + trasition: background-color 0.2s ease-in-out; } .sbControlsMenu-item:hover { @@ -399,12 +420,16 @@ */ #mainControls { - margin-bottom: 12px; + margin: 16px; + padding: 8px; + border-radius: 8px; + text-align: left; + border: 2px solid var(--sb-grey-bg-color); } .sponsorStartHint { display: block; - padding: 0 10px 12px; + text-align: left; } /* @@ -420,7 +445,7 @@ display: inline-block; color: var(--sb-main-fg-color); font-size: 16px; - padding: 8px 37px; + padding: 8px 16px; font-family: var(--sb-main-font-family); transition: 0.01s background-color; } @@ -451,7 +476,8 @@ .sbHeader { font-size: 20px; font-weight: bold; - margin: 10px 0 5px; + text-align: left; + margin: 0; } /* @@ -459,15 +485,23 @@ */ .sbYourWorkCols { - display: flex; - margin: 1rem; + margin: 16px; + 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); +} + +#usernameElement { + z-index: 2; + padding: 8px; +} + +#sponsorTimesContributionsContainer { + padding: 8px; } /* @@ -498,7 +532,7 @@ */ #submitUsername { - padding-left: 7px; + padding-left: 16px; } /* @@ -516,11 +550,17 @@ * Left align "Username" and "Submissions" labels */ -#usernameElement > div > p, +#usernameElement > div > span, #sponsorTimesContributionsContainer { text-align: start; } +#sponsorTimesContributionsContainer { + margin-left: 8px; + padding-left: 8px; + border-left: 2px solid var(--sb-grey-bg-color); +} + /* * Enable flexbox for buttons with SVG icon */ @@ -553,8 +593,10 @@ #usernameElement > div, #sponsorTimesContributionsContainer > div { display: flex; - flex-flow: column nowrap; - align-items: flex-start; + flex-direction: column; + justify-content: start; + /* flex-flow: column nowrap; */ + /* align-items: flex-start; */ } /* @@ -564,20 +606,18 @@ #usernameValue { overflow: hidden; text-overflow: ellipsis; - max-width: 130px; + white-space: nowrap; margin: 0 8px 0 0; + max-width: 130px; } /* * Set username form container with "expanded" state */ -#setUsername { - display: flex; -} - #setUsername.SBExpanded { - width: 200%; + text-align: left; + width: calc(200% - 130px); } /* @@ -585,12 +625,13 @@ */ #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); } /* @@ -598,17 +639,16 @@ */ #sbFooter { - margin-top: 10px; - padding-bottom: 20px; + padding: 8px 0; } #sbFooter a { display: inline-block; color: var(--sb-main-fg-color); text-decoration: none; - background: #222; + background: #333; cursor: pointer; - padding: 5px 16px; + padding: 4px 8px; border-radius: 4px; font-weight: 500; transition: background 0.3s ease !important; @@ -637,6 +677,7 @@ #sponsorBlockPopupBody .u-mZ { margin: 0 !important; + position: relative; } #sponsorBlockPopupBody .hidden { diff --git a/public/popup.html b/public/popup.html index 175087b0..c444a16d 100644 --- a/public/popup.html +++ b/public/popup.html @@ -18,7 +18,7 @@
@@ -68,50 +68,55 @@

__MSG_recordTimesDescription__

- __MSG_popupHint__ -
- -
- -

__MSG_yourWork__

-
- -
-
-

__MSG_Username__:

-
-

- - -
- + __MSG_help__ __MSG_website__ __MSG_viewLeaderboard__ +
GitHub -
Discord Matrix - __MSG_help__ $ diff --git a/src/content.ts b/src/content.ts index 655259ef..897ebcb7 100644 --- a/src/content.ts +++ b/src/content.ts @@ -1708,7 +1708,6 @@ function openInfoMenu() { //make the logo source not 404 //query selector must be used since getElementByID doesn't work on a node and this isn't added to the document yet const logo = popup.querySelector("#sponsorBlockPopupLogo"); - const settings = popup.querySelector("#sbPopupIconSettings"); const edit = popup.querySelector("#sbPopupIconEdit"); const copy = popup.querySelector("#sbPopupIconCopyUserID"); const check = popup.querySelector("#sbPopupIconCheck"); @@ -1716,7 +1715,6 @@ function openInfoMenu() { const heart = popup.querySelector(".sbHeart"); const close = popup.querySelector("#sbCloseDonate"); logo.src = chrome.extension.getURL("icons/IconSponsorBlocker256px.png"); - settings.src = chrome.extension.getURL("icons/settings.svg"); edit.src = chrome.extension.getURL("icons/pencil.svg"); copy.src = chrome.extension.getURL("icons/clipboard.svg"); check.src = chrome.extension.getURL("icons/check.svg"); diff --git a/src/popup.ts b/src/popup.ts index 504229fc..5e14df8a 100644 --- a/src/popup.ts +++ b/src/popup.ts @@ -100,7 +100,7 @@ async function runThePopup(messageListener?: MessageListener): Promise { "submitUsername", "sbPopupIconCopyUserID", // More - "submissionSection", + "submissionHint", "mainControls", "loadingIndicator", "videoFound", @@ -411,7 +411,7 @@ async function runThePopup(messageListener?: MessageListener): Promise { categoryColorCircle.style.backgroundColor = Config.config.barTypes[segmentTimes[i].category]?.color; categoryColorCircle.classList.add("dot"); categoryColorCircle.classList.add("sponsorTimesCategoryColorCircle"); - + let extraInfo = ""; if (segmentTimes[i].hidden === SponsorHideType.Downvoted) { //this one is downvoted @@ -420,26 +420,35 @@ async function runThePopup(messageListener?: MessageListener): Promise { //this one is too short extraInfo = " (" + chrome.i18n.getMessage("hiddenDueToDuration") + ")"; } else if (segmentTimes[i].hidden === SponsorHideType.Hidden) { - extraInfo = " (" + chrome.i18n.getMessage("manuallyHidden") + ")"; + extraInfo = " (" + chrome.i18n.getMessage("manuallyHidden") +")"; } - + const textNode = document.createTextNode(utils.shortCategoryName(segmentTimes[i].category) + extraInfo); const segmentTimeFromToNode = document.createElement("div"); if (segmentTimes[i].actionType === ActionType.Full) { 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"); votingButtons.classList.add("votingButtons"); @@ -562,7 +571,8 @@ async function runThePopup(messageListener?: MessageListener): Promise { 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