From 5496b05c88feabb5c2ccaf1327c5a6a50ca7ad39 Mon Sep 17 00:00:00 2001 From: Alec Rust Date: Sun, 13 Feb 2022 10:28:15 +0000 Subject: [PATCH 1/3] Add menu bar to popup --- public/popup.css | 615 +++++++++++++++++++++++++++------------------- public/popup.html | 113 ++++----- 2 files changed, 410 insertions(+), 318 deletions(-) diff --git a/public/popup.css b/public/popup.css index f8cc5b2c..7b16d4b8 100644 --- a/public/popup.css +++ b/public/popup.css @@ -1,235 +1,274 @@ :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; } +/* + * Default browser styles + */ + +html { + box-sizing: border-box; +} + +*, +*::before, +*::after { + box-sizing: inherit; +} + +p { + margin: 0; +} + +a { + color: var(--sb-main-fg-color); + text-decoration: none; +} + +button { + background: transparent; + border: 0; + cursor: pointer; + padding: 0; +} + +/* + * Disable transition on all elements until the extension has loaded + */ + +.preload * { + transition: none !important; +} + +/* + * IDs on element, element and main container + */ + #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; +} + +/* + * Header logo + */ + +.logo { + display: flex; + align-items: center; + font-size: 32px; + font-weight: bold; + justify-content: center; + user-select: none; + padding: 20px 0 10px; +} + +.logo img { + margin-right: 8px; +} + +/* + * Refresh segments button + */ + +#refreshSegmentsButton { + border-radius: 50%; + display: flex; + padding: 5px; + margin: 5px auto; + align-items: center; +} + +#refreshSegmentsButton:hover { + background-color: var(--sb-grey-bg-color); +} + +/* + * Individual segments ( - + + +
+ +

__MSG_noVideoID__

+ +

+
-
-
- - +
- +

-

__MSG_yourWork__

+

__MSG_yourWork__

@@ -98,7 +91,7 @@ - + @@ -115,7 +108,7 @@
-
- \ No newline at end of file + From a3734e050f3dea8e160b1e3edf40cee4d484f80b Mon Sep 17 00:00:00 2001 From: Alec Rust Date: Tue, 15 Feb 2022 17:25:33 +0000 Subject: [PATCH 2/3] Refactor away global styles --- public/popup.css | 167 +++++++++++++++++++++++----------------------- public/popup.html | 45 +++++++------ 2 files changed, 106 insertions(+), 106 deletions(-) diff --git a/public/popup.css b/public/popup.css index 7b16d4b8..bd828825 100644 --- a/public/popup.css +++ b/public/popup.css @@ -7,47 +7,14 @@ } /* - * Default browser styles + * IDs on container element (when inserted in page), element, + * element and main container */ -html { - box-sizing: border-box; +#sponsorBlockPopupContainer { + margin-bottom: 16px; } -*, -*::before, -*::after { - box-sizing: inherit; -} - -p { - margin: 0; -} - -a { - color: var(--sb-main-fg-color); - text-decoration: none; -} - -button { - background: transparent; - border: 0; - cursor: pointer; - padding: 0; -} - -/* - * Disable transition on all elements until the extension has loaded - */ - -.preload * { - transition: none !important; -} - -/* - * IDs on element, element and main container - */ - #sponsorBlockPopupHTML { color-scheme: dark; } @@ -66,11 +33,19 @@ button { text-align: center; } +/* + * Disable transition on all elements until the extension has loaded + */ + +.preload * { + transition: none !important; +} + /* * Header logo */ -.logo { +.sbPopupLogo { display: flex; align-items: center; font-size: 32px; @@ -80,7 +55,7 @@ button { padding: 20px 0 10px; } -.logo img { +.sbPopupLogo img { margin-right: 8px; } @@ -89,7 +64,10 @@ button { */ #refreshSegmentsButton { + background: transparent; + border: 0; border-radius: 50%; + cursor: pointer; display: flex; padding: 5px; margin: 5px auto; @@ -105,8 +83,11 @@ button { */ .segmentTimeButton { - font-weight: bold; + background: transparent; + border: 0; + cursor: pointer; color: var(--sb-main-fg-color); + font-weight: bold; padding: 7px; outline: none; width: 100%; @@ -150,14 +131,14 @@ button { * Main controls menu */ -.controlsMenu { +.sbControlsMenu { background-color: var(--sb-grey-bg-color); display: flex; justify-content: space-evenly; margin-top: 10px; } -.controlsMenu-item { +.sbControlsMenu-item { background-color: var(--sb-grey-bg-color); border: 0; padding: 0; @@ -171,11 +152,11 @@ button { justify-content: center; } -.controlsMenu-item:hover { +.sbControlsMenu-item:hover { background-color: #444; } -.controlsMenu-itemIcon { +.sbControlsMenu-itemIcon { margin-bottom: 6px; } @@ -292,12 +273,14 @@ button { * Generic buttons used for "Segment Starts Now" and "Submit Times" */ -.mediumButton { +.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; @@ -305,13 +288,13 @@ button { transition: 0.01s background-color; } -.mediumButton:hover, -.mediumButton:focus { +.sbMediumButton:hover, +.sbMediumButton:focus { outline: none; background-color: #ec1c1c; } -.mediumButton:active { +.sbMediumButton:active { position: relative; top: 1px; } @@ -324,6 +307,32 @@ button { 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; +} + /* * @@ -29,17 +29,17 @@ -
-
+

__MSG_yourWork__

-
+
-

__MSG_Username__:

+

__MSG_Username__:

-

+

@@ -89,7 +90,7 @@
- -
From dcbefb5457ca4d727908f11991c595674887eff0 Mon Sep 17 00:00:00 2001 From: Ajay Date: Sat, 12 Mar 2022 00:23:16 -0500 Subject: [PATCH 3/3] More specific class name --- public/popup.css | 2 +- public/popup.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/public/popup.css b/public/popup.css index bd828825..9ab4100e 100644 --- a/public/popup.css +++ b/public/popup.css @@ -37,7 +37,7 @@ * Disable transition on all elements until the extension has loaded */ -.preload * { +.sb-preload * { transition: none !important; } diff --git a/public/popup.html b/public/popup.html index abf2dba0..78001e86 100644 --- a/public/popup.html +++ b/public/popup.html @@ -9,7 +9,7 @@ -
+