diff --git a/changedetectionio/static/js/toggle-theme.js b/changedetectionio/static/js/toggle-theme.js
index 885b8907..675aa56f 100644
--- a/changedetectionio/static/js/toggle-theme.js
+++ b/changedetectionio/static/js/toggle-theme.js
@@ -44,4 +44,9 @@ $(document).ready(function () {
}
};
+ $('#heart-us').click(function () {
+ $("#overlay").toggleClass('visible');
+ heartpath.style.fill = document.getElementById("overlay").classList.contains("visible") ? '#ff0000' : 'var(--color-background)';
+ });
+
});
diff --git a/changedetectionio/static/styles/scss/parts/_darkmode.scss b/changedetectionio/static/styles/scss/parts/_darkmode.scss
index a9719d3c..6a80ecf6 100644
--- a/changedetectionio/static/styles/scss/parts/_darkmode.scss
+++ b/changedetectionio/static/styles/scss/parts/_darkmode.scss
@@ -1,6 +1,6 @@
#toggle-light-mode {
- width: 3rem;
+/* width: 3rem;*/
/* default */
.icon-dark {
display: none;
diff --git a/changedetectionio/static/styles/scss/parts/_love.scss b/changedetectionio/static/styles/scss/parts/_love.scss
new file mode 100644
index 00000000..ae693300
--- /dev/null
+++ b/changedetectionio/static/styles/scss/parts/_love.scss
@@ -0,0 +1,38 @@
+#overlay {
+
+ opacity: 0.95;
+ position: fixed;
+
+ width: 350px;
+ max-width: 100%;
+ height: 100%;
+ top: 0;
+ right: -350px;
+ background-color: var(--color-table-stripe);
+ z-index: 2;
+
+ transform: translateX(0);
+ transition: transform .5s ease;
+
+
+ &.visible {
+ transform: translateX(-100%);
+
+ }
+
+ .content {
+ font-size: 0.875rem;
+ padding: 1rem;
+ margin-top: 5rem;
+ max-width: 400px;
+ color: var(--color-watch-table-row-text);
+ }
+}
+
+#heartpath {
+ &:hover {
+ fill: #ff0000 !important;
+ transition: all ease 0.3s !important;
+ }
+ transition: all ease 0.3s !important;
+}
\ No newline at end of file
diff --git a/changedetectionio/static/styles/scss/parts/_menu.scss b/changedetectionio/static/styles/scss/parts/_menu.scss
new file mode 100644
index 00000000..22322eb8
--- /dev/null
+++ b/changedetectionio/static/styles/scss/parts/_menu.scss
@@ -0,0 +1,25 @@
+.pure-menu-link {
+ padding: 0.5rem 1em;
+ line-height: 1.2rem;
+}
+
+.pure-menu-item {
+ svg {
+ height: 1.2rem;
+ }
+ * {
+ vertical-align: middle;
+ }
+ .github-link {
+ height: 1.8rem;
+ display: block;
+ svg {
+ height: 100%;
+ }
+ }
+ .bi-heart {
+ &:hover {
+ cursor: pointer;
+ }
+ }
+}
diff --git a/changedetectionio/static/styles/scss/styles.scss b/changedetectionio/static/styles/scss/styles.scss
index f5ae8a9f..30b2f6f2 100644
--- a/changedetectionio/static/styles/scss/styles.scss
+++ b/changedetectionio/static/styles/scss/styles.scss
@@ -9,6 +9,8 @@
@import "parts/_spinners";
@import "parts/_variables";
@import "parts/_darkmode";
+@import "parts/_menu";
+@import "parts/_love";
body {
color: var(--color-text);
@@ -55,11 +57,6 @@ a.github-link {
}
}
-
-#toggle-search {
- width: 2rem;
-}
-
#search-q {
opacity: 0;
-webkit-transition: all .9s ease;
@@ -1082,3 +1079,4 @@ ul {
border-radius: 3px;
white-space: nowrap;
}
+
diff --git a/changedetectionio/static/styles/styles.css b/changedetectionio/static/styles/styles.css
index 33071546..a970395a 100644
--- a/changedetectionio/static/styles/styles.css
+++ b/changedetectionio/static/styles/styles.css
@@ -331,7 +331,7 @@ html[data-darkmode="true"] {
color: var(--color-watch-table-error); }
#toggle-light-mode {
- width: 3rem;
+ /* width: 3rem;*/
/* default */ }
#toggle-light-mode .icon-dark {
display: none; }
@@ -342,6 +342,52 @@ html[data-darkmode="true"] #toggle-light-mode .icon-light {
html[data-darkmode="true"] #toggle-light-mode .icon-dark {
display: block; }
+.pure-menu-link {
+ padding: 0.5rem 1em;
+ line-height: 1.2rem; }
+
+.pure-menu-item svg {
+ height: 1.2rem; }
+
+.pure-menu-item * {
+ vertical-align: middle; }
+
+.pure-menu-item .github-link {
+ height: 1.8rem;
+ display: block; }
+ .pure-menu-item .github-link svg {
+ height: 100%; }
+
+.pure-menu-item .bi-heart:hover {
+ cursor: pointer; }
+
+#overlay {
+ opacity: 0.95;
+ position: fixed;
+ width: 350px;
+ max-width: 100%;
+ height: 100%;
+ top: 0;
+ right: -350px;
+ background-color: var(--color-table-stripe);
+ z-index: 2;
+ transform: translateX(0);
+ transition: transform .5s ease; }
+ #overlay.visible {
+ transform: translateX(-100%); }
+ #overlay .content {
+ font-size: 0.875rem;
+ padding: 1rem;
+ margin-top: 5rem;
+ max-width: 400px;
+ color: var(--color-watch-table-row-text); }
+
+#heartpath {
+ transition: all ease 0.3s !important; }
+ #heartpath:hover {
+ fill: #ff0000 !important;
+ transition: all ease 0.3s !important; }
+
body {
color: var(--color-text);
background: var(--color-background-page); }
@@ -376,9 +422,6 @@ a.github-link {
a.github-link:hover {
color: var(--color-icon-github-hover); }
-#toggle-search {
- width: 2rem; }
-
#search-q {
opacity: 0;
-webkit-transition: all .9s ease;
diff --git a/changedetectionio/templates/base.html b/changedetectionio/templates/base.html
index e8ef295a..d2da7aca 100644
--- a/changedetectionio/templates/base.html
+++ b/changedetectionio/templates/base.html
@@ -108,6 +108,20 @@
+