From a4d9d839890912108f829c39be7b31c9f801a41c Mon Sep 17 00:00:00 2001 From: mmble <23295125+mmble@users.noreply.github.com> Date: Sun, 16 Aug 2020 04:09:14 +0200 Subject: [PATCH] Popup.html redesign - almost done --- README.md | 7 +- public/_locales/en/messages.json | 15 ++- public/icons/check.svg | 1 + public/libs/Source+Sans+Pro.css | 72 +++++++++-- public/popup.css | 152 ++++++++++++++++-------- public/popup.html | 197 +++++++++++++++---------------- src/popup.ts | 19 ++- 7 files changed, 295 insertions(+), 168 deletions(-) create mode 100644 public/icons/check.svg diff --git a/README.md b/README.md index 4c9933a8..903cc1d6 100644 --- a/README.md +++ b/README.md @@ -82,6 +82,7 @@ The awesome [Invidious API](https://github.com/omarroth/invidious/wiki/API) was Originally forked from [YTSponsorSkip](https://github.com/OfficialNoob/YTSponsorSkip), but zero code remains. -Some icons made by Gregor Cresnar from www.flaticon.com and are licensed by CC 3.0 BY - -Some icons made by Freepik from www.flaticon.com are licensed by CC 3.0 BY +Icons made by: +* Gregor Cresnar from www.flaticon.com and are licensed by CC 3.0 BY +* Freepik from www.flaticon.com and are licensed by CC 3.0 BY +* Alexander Kahlkopf from iconmonstr.com and are licensed by iconmonstr License \ No newline at end of file diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json index ba692121..f31c3861 100644 --- a/public/_locales/en/messages.json +++ b/public/_locales/en/messages.json @@ -134,13 +134,13 @@ "message": "Vote On A Segment" }, "soFarUHSubmited": { - "message": "So far, you've submitted" + "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" @@ -160,6 +160,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" }, @@ -284,7 +287,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 " @@ -302,10 +305,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." diff --git a/public/icons/check.svg b/public/icons/check.svg new file mode 100644 index 00000000..7ceda54b --- /dev/null +++ b/public/icons/check.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/libs/Source+Sans+Pro.css b/public/libs/Source+Sans+Pro.css index 3a00466c..55a505fc 100644 --- a/public/libs/Source+Sans+Pro.css +++ b/public/libs/Source+Sans+Pro.css @@ -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; +} \ No newline at end of file diff --git a/public/popup.css b/public/popup.css index c342cf0b..dc522f0a 100644 --- a/public/popup.css +++ b/public/popup.css @@ -1,39 +1,65 @@ :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; + --sb-main-fg-color: white; + --sb-gray-fg-color: #444848; + --sb-on-white-bg: black; + --sb-green-bg: #077B27; } #sponsorblockPopup { - background-color: var(--sb-main-bg-color); - color: var(--sb-main-fg-color); - font-family: 'Source Sans Pro', sans-serif; - font-size: 14px; - overflow-y: scroll; - display: flex; - flex-flow: column nowrap; + background-color: var(--sb-main-bg-color); + color: var(--sb-main-fg-color); + font-family: 'Source Sans Pro', sans-serif; + font-size: 13px; + overflow-y: scroll; + display: flex; + flex-flow: column nowrap; align-items: center; + width: calc(100% - 6px); + height: calc(100% - 36px); + overflow-y: unset; + padding: 18px 3px; + text-align: center; +} + +#videoInfo>p, #videoInfo>div>p { margin: 0; - min-width: 320px; } div.logoText { - display: flex; - align-items: center; + display: flex; + flex-flow: row nowrap; + align-items: center; + color: var(--sb-main-fg-color); } -div.logoText > p { - font-size: 32px; - margin: 0; +div.logoText>p, .recordingSubtitle { + font-size: 32px; + margin: -4px 0 -2px; + font-weight: bold; +} + +.largeButton{ + background: white; + /*font-weight: bold;*/ + padding: 6px 24px; + font-size: 20px; + border-radius: 25px; + text-decoration: none; + color: black; + height: 24px; + width: 152px; + display: block; + overflow: hidden; + text-overflow: ellipsis; } /* disable extension */ + #disableExtension { - display: flex; - flex-flow: column nowrap; - align-items: center; + display: flex; + flex-flow: column nowrap; + align-items: center; } /* switch button */ @@ -42,6 +68,7 @@ div.logoText > p { display: flex; cursor: pointer; } + .switchBg { display: block; height: 37px; @@ -79,13 +106,15 @@ div.logoText > p { box-shadow: .75px .75px 3.8px 0px rgba(50, 50, 50, 0.45); } -#toggleSwitch:checked ~ .switchDot { +#toggleSwitch:checked~.switchDot { transform: translateX(40px); } -#toggleSwitch:checked ~ .switchBg.green { + +#toggleSwitch:checked~.switchBg.green { opacity: 1 !important; } -#toggleSwitch:checked ~ .switchBg.white { + +#toggleSwitch:checked~.switchBg.white { opacity: 0 !important; transition: opacity .2s step-end; } @@ -97,11 +126,15 @@ div.logoText > p { margin: 0 6% 0 6%; } -.sidebyside > div { +.sidebyside>div { width: 50%; justify-content: center; } +#videoInfo { + margin-bottom: 6px !important; +} + /* additional buttons */ #additionalButtons { @@ -110,52 +143,79 @@ div.logoText > p { align-items: center; } -#additionalButtons > button { - background: none; +#additionalButtons>button, button#setUsernameButton, #submitUsername { + background: none; border: none; color: white; width: fit-content; padding: 0; } -#additionalButtons, #additionalButtons > button { - font-size: 16px; +#additionalButtons, #additionalButtons>button { + font-size: 15px; } -label > svg > path { - fill: var(--sb-main-fg-color); +#usernameValue, #usernameInput, #sponsorTimesContributionsDisplay{ + font-size: 19px; } -label > p, #disableExtension > p { +label>svg>path { + fill: var(--sb-main-fg-color); +} + +label>p, #disableExtension>p, #usernameValue, #usernameElement > p,#sponsorTimesContributionsContainer > p { margin: 0; } -.grayedOut > label > svg > path { - fill: var(--sb-gray-fg-color); -} -.grayedOut > label { - color: var(--sb-gray-fg-color); +#usernameElement > p, #sponsorTimesContributionsContainer { + text-align: start; } -label > svg.rotated { - transform: rotate(45deg); +.grayedOut>label>svg>path { + fill: var(--sb-gray-fg-color); } -label > svg, button > img { - margin: 0 8px 0 0; +.grayedOut>label { + color: var(--sb-gray-fg-color); } -#mainControls > label, #additionalButtons > button { +label>svg.rotated { + transform: rotate(45deg); +} + +label>svg, button#optionsButton>img, .logoText>img, #usernameValue { + margin-right: 8px; +} + +#mainControls>label, #additionalButtons>button, div#setUsernameContainer { display: flex; flex-flow: row nowrap; } +#usernameElement { + width: 137px; +} + +#usernameValue{ + overflow: hidden; + text-overflow: ellipsis; +} + +#usernameInput { + background: none; + border: none; + color: var(--sb-main-fg-color); +} + +/* footer */ + +#sbFooter > a { + color: var(--sb-main-fg-color); + text-decoration: none; +} + /* end reset */ #sponsorBlockPopupLogo { - vertical-align: text-bottom; -} - -.logoText { - color: white; + vertical-align: text-bottom; } diff --git a/public/popup.html b/public/popup.html index 17669f2b..936057d4 100644 --- a/public/popup.html +++ b/public/popup.html @@ -6,113 +6,112 @@ - -
- -

SponsorBlock

-
- -

__MSG_noVideoID__

- -

-

-
-
- - -

__MSG_disableSkipping__

- + +
+
+ +

SponsorBlock

-
- -
- - +
+
+ +

__MSG_noVideoID__

+ +

+
+

+
+
+
+ + +

__MSG_disableSkipping__

+ +
+
+ +
+ + +
+ +
+
+

__MSG_yourWork__

+
+
+

__MSG_Username__

+
+

+ +
+ +
+ -
-
-

__MSG_yourWork__

-

-