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 @@
- -