diff --git a/public/popup.css b/public/popup.css
index 1f1dd637..a28f3d7f 100644
--- a/public/popup.css
+++ b/public/popup.css
@@ -1,11 +1,16 @@
:root {
--sb-main-font-family: "Source Sans Pro", sans-serif;
- --sb-main-bg-color: #222626;
+ --sb-main-bg-color: #111;
--sb-main-fg-color: #fff;
--sb-grey-bg-color: #333;
+ --sb-grey-fg-color: #999;
--sb-red-bg-color: #cc1717;
}
+.grey-text {
+ color: var(--sb-grey-fg-color);
+}
+
/*
* Container when popup displayed in-page
*/
@@ -107,18 +112,76 @@
.sbPopupLogo {
display: flex;
+ flex-direction: column;
align-items: center;
font-size: 32px;
font-weight: bold;
justify-content: center;
user-select: none;
- padding: 20px 0 10px;
+ padding: 1rem;
}
.sbPopupLogo img {
- margin-right: 8px;
+ margin: 0.5rem 0;
}
+/*
+ * Options button
+ */
+
+#optionsButton {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: absolute;
+ background: none;
+ box-shadow: none;
+ border: none;
+ top: 26px;
+ right: 26px;
+ padding: 5px;
+ z-index: 69;
+ height: 2rem;
+ width: 2rem;
+}
+#optionsButton svg {
+ transition: transform 0.15s ease-in-out !important;
+ transform-origin: center center;
+ color: var(--sb-grey-fg-color);
+}
+
+#optionsButton:hover svg {
+ color: var(--sb-main-fg-color);
+ transform: rotate(90deg);
+}
+
+#optionsButton:active svg {
+ transform: scale(1.5);
+}
+
+#optionsButton:before {
+ content: attr(data-hover);
+ opacity: 0;
+ pointer-events: none;
+ width: content;
+ color: var(--sb-main-fg-color);
+ background-color: var(--sb-grey-bg-color);
+ border-radius: 1rem;
+ padding: 0.25rem 0.5rem;
+ transition: .3s;
+
+ position: absolute;
+ z-index: 1;
+ left: -200%;
+ top: 0.25rem;
+}
+
+#optionsButton:hover:before {
+ opacity: 1;
+ transform: translateX(-5px);
+}
+
+
/*
* Refresh segments button
*/
@@ -397,7 +460,7 @@
.sbYourWorkCols {
display: flex;
- margin: 0 20px 12px;
+ margin: 1rem;
}
.sbYourWorkCols > div {
@@ -540,10 +603,21 @@
}
#sbFooter a {
+ display: inline-block;
color: var(--sb-main-fg-color);
text-decoration: none;
+ background: #222;
+ cursor: pointer;
+ padding: 5px 16px;
+ border-radius: 4px;
+ font-weight: 500;
+ transition: 0.4s;
+ margin: 2px 1px;
}
+#sbFooter a:hover {
+ background: #444;
+}
/*
* "Show Notice Again" button
*/
@@ -561,7 +635,7 @@
* Generic utilities
*/
- #sponsorBlockPopupBody .u-mZ {
+#sponsorBlockPopupBody .u-mZ {
margin: 0 !important;
}
diff --git a/public/popup.html b/public/popup.html
index b1a241c4..175087b0 100644
--- a/public/popup.html
+++ b/public/popup.html
@@ -15,16 +15,17 @@
__MSG_betaServerWarning__
+
-
+
-
__MSG_noVideoID__
+
__MSG_noVideoID__
-
+
@@ -32,7 +33,7 @@
+
-
__MSG_Username__:
+
__MSG_Username__:
-
-