From 02b01031f0d3e55ddcfa3182a463bdece01b174b Mon Sep 17 00:00:00 2001
From: krvpb024 <krvpb024@protonmail.com>
Date: Fri, 9 Feb 2024 16:57:03 +0800
Subject: [PATCH] rewrite css selector and style for page buttons and links

---
 .../template/templates/common/feed_menu.html  | 10 +++++-----
 .../templates/views/category_entries.html     | 11 ++++++----
 .../templates/views/category_feeds.html       |  6 ++++--
 internal/template/templates/views/entry.html  |  8 ++++++++
 .../templates/views/feed_entries.html         | 11 +++++++---
 .../templates/views/history_entries.html      |  3 ++-
 .../templates/views/shared_entries.html       |  3 ++-
 .../templates/views/unread_entries.html       |  3 +++
 internal/ui/static/css/common.css             | 20 ++++++++++++-------
 internal/ui/static/js/app.js                  |  6 ++----
 10 files changed, 54 insertions(+), 27 deletions(-)

diff --git a/internal/template/templates/common/feed_menu.html b/internal/template/templates/common/feed_menu.html
index 9ac31299a2f..e2ea22a7093 100644
--- a/internal/template/templates/common/feed_menu.html
+++ b/internal/template/templates/common/feed_menu.html
@@ -1,20 +1,20 @@
 {{ define "feed_menu" }}
 <nav aria-label="{{ t "page.feeds.title" }} {{ t "menu.title" }}"><ul>
     <li>
-        <a href="{{ route "feeds" }}">{{ icon "feeds" }}{{ t "menu.feeds" }}</a>
+        <a class="page-link" href="{{ route "feeds" }}">{{ icon "feeds" }}{{ t "menu.feeds" }}</a>
     </li>
     <li>
-        <a href="{{ route "addSubscription" }}">{{ icon "add-feed" }}{{ t "menu.add_feed" }}</a>
+        <a class="page-link" href="{{ route "addSubscription" }}">{{ icon "add-feed" }}{{ t "menu.add_feed" }}</a>
     </li>
     <li>
-        <a href="{{ route "export" }}">{{ icon "feed-export" }}{{ t "menu.export" }}</a>
+        <a class="page-link" href="{{ route "export" }}">{{ icon "feed-export" }}{{ t "menu.export" }}</a>
     </li>
     <li>
-        <a href="{{ route "import" }}">{{ icon "feed-import" }}{{ t "menu.import" }}</a>
+        <a class="page-link" href="{{ route "import" }}">{{ icon "feed-import" }}{{ t "menu.import" }}</a>
     </li>
     <li>
         <form action="{{ route "refreshAllFeeds" }}" class="page-header-action-form">
-            <button data-label-loading="{{ t "confirm.loading" }}">
+            <button class="page-button" data-label-loading="{{ t "confirm.loading" }}">
                 {{ icon "refresh" }}{{ t "menu.refresh_all_feeds" }}
             </button>
         </form>
diff --git a/internal/template/templates/views/category_entries.html b/internal/template/templates/views/category_entries.html
index f3eaff85797..88d3febe7c4 100644
--- a/internal/template/templates/views/category_entries.html
+++ b/internal/template/templates/views/category_entries.html
@@ -18,6 +18,7 @@ <h1 id="page-header-title" dir="auto">
             {{ if .entries }}
             <li>
                 <button
+                    class="page-button"
                     data-action="markPageAsRead"
                     data-label-question="{{ t "confirm.question" }}"
                     data-label-yes="{{ t "confirm.yes" }}"
@@ -27,6 +28,7 @@ <h1 id="page-header-title" dir="auto">
             </li>
             <li>
                 <button
+                    class="page-button"
                     data-confirm="true"
                     data-label-question="{{ t "confirm.question" }}"
                     data-label-yes="{{ t "confirm.yes" }}"
@@ -37,22 +39,22 @@ <h1 id="page-header-title" dir="auto">
             {{ end }}
             {{ if .showOnlyUnreadEntries }}
             <li>
-                <a href="{{ route "categoryEntriesAll" "categoryID" .category.ID }}">{{ icon "show-all-entries" }}{{ t "menu.show_all_entries" }}</a>
+                <a class="page-link" href="{{ route "categoryEntriesAll" "categoryID" .category.ID }}">{{ icon "show-all-entries" }}{{ t "menu.show_all_entries" }}</a>
             </li>
             {{ else }}
             <li>
-                <a href="{{ route "categoryEntries" "categoryID" .category.ID }}">{{ icon "show-unread-entries" }}{{ t "menu.show_only_unread_entries" }}</a>
+                <a class="page-link" href="{{ route "categoryEntries" "categoryID" .category.ID }}">{{ icon "show-unread-entries" }}{{ t "menu.show_only_unread_entries" }}</a>
             </li>
             {{ end }}
             <li>
-                <a href="{{ route "categoryFeeds" "categoryID" .category.ID }}">{{ icon "feeds" }}{{ t "menu.feeds" }}</a>
+                <a class="page-link" href="{{ route "categoryFeeds" "categoryID" .category.ID }}">{{ icon "feeds" }}{{ t "menu.feeds" }}</a>
             </li>
             <li>
                 <form
                     action="{{ route "refreshCategoryEntriesPage" "categoryID" .category.ID }}"
                     class="page-header-action-form"
                 >
-                    <button data-label-loading="{{ t "confirm.loading" }}">
+                    <button class="page-button" data-label-loading="{{ t "confirm.loading" }}">
                         {{ icon "refresh" }}{{ t "menu.refresh_all_feeds" }}
                     </button>
                 </form>
@@ -108,6 +110,7 @@ <h2 id="entry-title-{{ .ID }}" class="item-title">
         <ul>
             <li>
                 <button
+                    class="page-button"
                     data-action="markPageAsRead"
                     data-label-question="{{ t "confirm.question" }}"
                     data-label-yes="{{ t "confirm.yes" }}"
diff --git a/internal/template/templates/views/category_feeds.html b/internal/template/templates/views/category_feeds.html
index ee2e282a1f7..a49a3e4d9f6 100644
--- a/internal/template/templates/views/category_feeds.html
+++ b/internal/template/templates/views/category_feeds.html
@@ -10,14 +10,15 @@ <h1 id="page-header-title" dir="auto">
     <nav aria-label="{{ .category.Title }} {{ t "page.feeds.title" }} {{ t "menu.title" }}">
         <ul>
             <li>
-                <a href="{{ route "categoryEntries" "categoryID" .category.ID }}">{{ icon "entries" }}{{ t "menu.feed_entries" }}</a>
+                <a class="page-link" href="{{ route "categoryEntries" "categoryID" .category.ID }}">{{ icon "entries" }}{{ t "menu.feed_entries" }}</a>
             </li>
             <li>
-                <a href="{{ route "editCategory" "categoryID" .category.ID }}">{{ icon "edit" }}{{ t "menu.edit_category" }}</a>
+                <a class="page-link" href="{{ route "editCategory" "categoryID" .category.ID }}">{{ icon "edit" }}{{ t "menu.edit_category" }}</a>
             </li>
             {{ if eq .total 0 }}
             <li>
                 <button
+                    class="page-button"
                     data-confirm="true"
                     data-label-question="{{ t "confirm.question" }}"
                     data-label-yes="{{ t "confirm.yes" }}"
@@ -36,6 +37,7 @@ <h1 id="page-header-title" dir="auto">
                     action="{{ route "refreshCategoryFeedsPage" "categoryID" .category.ID }}"
                 >
                     <button
+                        class="page-button"
                         data-label-loading="{{ t "confirm.loading" }}"
                     >
                         {{ icon "refresh" }}{{ t "menu.refresh_all_feeds" }}
diff --git a/internal/template/templates/views/entry.html b/internal/template/templates/views/entry.html
index fa5162a34ff..6a4ed9c51ff 100644
--- a/internal/template/templates/views/entry.html
+++ b/internal/template/templates/views/entry.html
@@ -11,6 +11,7 @@ <h1 id="page-header-title" dir="auto">
             <ul>
                 <li>
                     <button
+                        class="page-button"
                         title="{{ t "entry.status.title" }}"
                         data-toggle-status="true"
                         data-label-loading="{{ t "entry.state.saving" }}"
@@ -23,6 +24,7 @@ <h1 id="page-header-title" dir="auto">
                 </li>
                 <li>
                     <button
+                        class="page-button"
                         data-toggle-bookmark="true"
                         data-bookmark-url="{{ route "toggleBookmark" "entryID" .entry.ID }}"
                         data-label-loading="{{ t "entry.state.saving" }}"
@@ -36,6 +38,7 @@ <h1 id="page-header-title" dir="auto">
                 {{ if .hasSaveEntry }}
                 <li>
                     <button
+                        class="page-button"
                         title="{{ t "entry.save.title" }}"
                         data-save-entry="true"
                         data-save-url="{{ route "saveEntry" "entryID" .entry.ID }}"
@@ -54,6 +57,7 @@ <h1 id="page-header-title" dir="auto">
                 </li>
                 <li>
                     <button
+                        class="page-button"
                         data-confirm="true"
                         data-url="{{ route "unshareEntry" "entryID" .entry.ID }}"
                         data-label-question="{{ t "confirm.question" }}"
@@ -64,6 +68,7 @@ <h1 id="page-header-title" dir="auto">
                 {{ else }}
                 <li>
                     <a href="{{ route "shareEntry" "entryID" .entry.ID }}"
+                        class="page-link"
                         title="{{ t "entry.share.title" }}"
                         data-share-status="share"
                         target="_blank">{{ icon "share" }}<span class="icon-label">{{ t "entry.share.label" }}</span></a>
@@ -71,6 +76,7 @@ <h1 id="page-header-title" dir="auto">
                 {{ end }}
                 <li>
                     <a href="{{ .entry.URL | safeURL  }}"
+                        class="page-link"
                         target="_blank"
                         rel="noopener noreferrer"
                         referrerpolicy="no-referrer"
@@ -78,6 +84,7 @@ <h1 id="page-header-title" dir="auto">
                 </li>
                 <li>
                     <button
+                        class="page-button"
                         title="{{ t "entry.scraper.title" }}"
                         data-fetch-content-entry="true"
                         data-fetch-content-url="{{ route "fetchContent" "entryID" .entry.ID }}"
@@ -87,6 +94,7 @@ <h1 id="page-header-title" dir="auto">
                 {{ if .entry.CommentsURL }}
                 <li>
                     <a href="{{ .entry.CommentsURL | safeURL }}"
+                        class="page-link"
                         title="{{ t "entry.comments.title" }}"
                         target="_blank"
                         rel="noopener noreferrer"
diff --git a/internal/template/templates/views/feed_entries.html b/internal/template/templates/views/feed_entries.html
index 3d1d0fe3b29..3e926c08391 100644
--- a/internal/template/templates/views/feed_entries.html
+++ b/internal/template/templates/views/feed_entries.html
@@ -18,6 +18,7 @@ <h1 id="page-header-title" dir="auto">
             {{ if .entries }}
             <li>
                 <button
+                    class="page-button"
                     data-action="markPageAsRead"
                     data-label-question="{{ t "confirm.question" }}"
                     data-label-yes="{{ t "confirm.yes" }}"
@@ -27,6 +28,7 @@ <h1 id="page-header-title" dir="auto">
             </li>
             <li>
                 <button
+                    class="page-button"
                     data-confirm="true"
                     data-label-question="{{ t "confirm.question" }}"
                     data-label-yes="{{ t "confirm.yes" }}"
@@ -37,15 +39,16 @@ <h1 id="page-header-title" dir="auto">
             {{ end }}
             {{ if .showOnlyUnreadEntries }}
             <li>
-                <a href="{{ route "feedEntriesAll" "feedID" .feed.ID }}">{{ icon "show-all-entries" }}{{ t "menu.show_all_entries" }}</a>
+                <a class="page-link" href="{{ route "feedEntriesAll" "feedID" .feed.ID }}">{{ icon "show-all-entries" }}{{ t "menu.show_all_entries" }}</a>
             </li>
             {{ else }}
             <li>
-                <a href="{{ route "feedEntries" "feedID" .feed.ID }}">{{ icon "show-unread-entries" }}{{ t "menu.show_only_unread_entries" }}</a>
+                <a class="page-link" href="{{ route "feedEntries" "feedID" .feed.ID }}">{{ icon "show-unread-entries" }}{{ t "menu.show_only_unread_entries" }}</a>
             </li>
             {{ end }}
             <li>
                 <button
+                    class="page-button"
                     data-confirm="true"
                     data-label-question="{{ t "confirm.question.refresh" }}"
                     data-label-yes="{{ t "confirm.yes" }}"
@@ -55,10 +58,11 @@ <h1 id="page-header-title" dir="auto">
                     data-no-action-url="{{ route "refreshFeed" "feedID" .feed.ID }}?forceRefresh=false">{{ icon "refresh" }}{{ t "menu.refresh_feed" }}</button>
             </li>
             <li>
-                <a href="{{ route "editFeed" "feedID" .feed.ID }}">{{ icon "edit" }}{{ t "menu.edit_feed" }}</a>
+                <a class="page-link" href="{{ route "editFeed" "feedID" .feed.ID }}">{{ icon "edit" }}{{ t "menu.edit_feed" }}</a>
             </li>
             <li>
                 <button
+                    class="page-button"
                     data-confirm="true"
                     data-action="remove-feed"
                     data-label-question="{{ t "confirm.question" }}"
@@ -133,6 +137,7 @@ <h2 id="entry-title-{{ .ID }}" class="item-title">
         <ul>
             <li>
                 <button
+                    class="page-button"
                     data-action="markPageAsRead"
                     data-label-question="{{ t "confirm.question" }}"
                     data-label-yes="{{ t "confirm.yes" }}"
diff --git a/internal/template/templates/views/history_entries.html b/internal/template/templates/views/history_entries.html
index c1d02a533bb..9550c5f435f 100644
--- a/internal/template/templates/views/history_entries.html
+++ b/internal/template/templates/views/history_entries.html
@@ -12,6 +12,7 @@ <h1 id="page-header-title">
             {{ if .entries }}
             <li>
                 <button
+                    class="page-button"
                     data-confirm="true"
                     data-url="{{ route "flushHistory" }}"
                     data-label-question="{{ t "confirm.question" }}"
@@ -21,7 +22,7 @@ <h1 id="page-header-title">
             </li>
             {{ end }}
             <li>
-                <a href="{{ route "sharedEntries" }}">{{ icon "share" }}{{ t "menu.shared_entries" }}</a>
+                <a class="page-link" href="{{ route "sharedEntries" }}">{{ icon "share" }}{{ t "menu.shared_entries" }}</a>
             </li>
         </ul>
     </nav>
diff --git a/internal/template/templates/views/shared_entries.html b/internal/template/templates/views/shared_entries.html
index 5c0ea059324..3c8f13e1559 100644
--- a/internal/template/templates/views/shared_entries.html
+++ b/internal/template/templates/views/shared_entries.html
@@ -12,6 +12,7 @@ <h1 id="page-header-title">
         <ul>
             <li>
                 <button
+                    class="page-button"
                     data-confirm="true"
                     data-url="{{ route "flushHistory" }}"
                     data-label-question="{{ t "confirm.question" }}"
@@ -20,7 +21,7 @@ <h1 id="page-header-title">
                     data-label-loading="{{ t "confirm.loading" }}">{{ icon "delete" }}{{ t "menu.flush_history" }}</button>
             </li>
             <li>
-                <a href="{{ route "sharedEntries" }}">{{ icon "share" }}{{ t "menu.shared_entries" }}</a>
+                <a class="page-link" href="{{ route "sharedEntries" }}">{{ icon "share" }}{{ t "menu.shared_entries" }}</a>
             </li>
         </ul>
     </nav>
diff --git a/internal/template/templates/views/unread_entries.html b/internal/template/templates/views/unread_entries.html
index 096e2eaafa0..9e65245b8b9 100644
--- a/internal/template/templates/views/unread_entries.html
+++ b/internal/template/templates/views/unread_entries.html
@@ -12,6 +12,7 @@ <h1 id="page-header-title">
         <ul>
             <li>
                 <button
+                    class="page-button"
                     data-action="markPageAsRead"
                     data-show-only-unread="1"
                     data-label-question="{{ t "confirm.question" }}"
@@ -21,6 +22,7 @@ <h1 id="page-header-title">
             </li>
             <li>
                 <button
+                    class="page-button"
                     data-confirm="true"
                     data-url="{{ route "markAllAsRead" }}"
                     data-redirect-url="{{ route "unread" }}"
@@ -75,6 +77,7 @@ <h2 id="entry-title-{{ .ID }}" class="item-title">
         <ul>
             <li>
                 <button
+                    class="page-button"
                     data-action="markPageAsRead"
                     data-label-question="{{ t "confirm.question" }}"
                     data-label-yes="{{ t "confirm.yes" }}"
diff --git a/internal/ui/static/css/common.css b/internal/ui/static/css/common.css
index 6cb85925eb6..c8679eefd36 100644
--- a/internal/ui/static/css/common.css
+++ b/internal/ui/static/css/common.css
@@ -192,18 +192,19 @@ a:hover {
     display: inline-flex;
 }
 
-:is(.page-header, .page-footer, .entry-header) ul :is(a, button) {
+:is(.page-button, .page-link) {
     color: var(--link-color);
     border: none;
     background-color: transparent;
     font-size: 1rem;
-}
+    cursor: pointer;
 
-:is(.page-header, .page-footer, .entry-header) ul :is(a:is(:hover, :focus), button:is(:hover, :focus)) {
-    color: var(--link-hover-color);
+    &:is(hover, :focus) {
+        color: var(--link-hover-color);
+    }
 }
 
-:is(.page-header, .page-footer, .entry-header) ul button:active {
+.page-button:active {
     translate: 1px 1px;
 }
 
@@ -911,12 +912,13 @@ template {
     margin-right: 0;
 }
 
-.item-meta-icons :is(a, button) {
+.item-meta-icons li > :is(a, button) {
     color: #777;
     text-decoration: none;
     font-size: 0.8rem;
     border: none;
     background-color: transparent;
+    cursor: pointer;
 }
 
 .item-meta-icons a span {
@@ -1244,8 +1246,12 @@ details.entry-enclosures {
     color: #ed2d04;
 }
 
-.confirm a {
+.confirm button {
     color: #ed2d04;
+    border: none;
+    background-color: transparent;
+    cursor: pointer;
+    font-size: inherit;
 }
 
 .loading {
diff --git a/internal/ui/static/js/app.js b/internal/ui/static/js/app.js
index e2d018fc342..959ee2acfa5 100644
--- a/internal/ui/static/js/app.js
+++ b/internal/ui/static/js/app.js
@@ -556,8 +556,7 @@ function handleConfirmationMessage(linkElement, callback) {
         containerElement.appendChild(loadingElement);
     }
 
-    let yesElement = document.createElement("a");
-    yesElement.href = "#";
+    let yesElement = document.createElement("button");
     yesElement.appendChild(document.createTextNode(linkElement.dataset.labelYes));
     yesElement.onclick = (event) => {
         event.preventDefault();
@@ -567,8 +566,7 @@ function handleConfirmationMessage(linkElement, callback) {
         callback(linkElement.dataset.url, linkElement.dataset.redirectUrl);
     };
 
-    let noElement = document.createElement("a");
-    noElement.href = "#";
+    let noElement = document.createElement("button");
     noElement.appendChild(document.createTextNode(linkElement.dataset.labelNo));
     noElement.onclick = (event) => {
         event.preventDefault();