rewrite css selector and style for page buttons and links

miniflux · Feb 9, 2024 · 02b0103 · 02b0103
1 parent 6252ada
commit 02b0103
Show file tree

Hide file tree

Showing 10 changed files with 54 additions and 27 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,20 +68,23 @@ <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>
                 </li>
                 {{ end }}
                 <li>
                     <a href="{{ .entry.URL | safeURL  }}"
+                        class="page-link"
                         target="_blank"
                         rel="noopener noreferrer"
                         referrerpolicy="no-referrer"
                         data-original-link="{{ .user.MarkReadOnView }}">{{ icon "external-link" }}<span class="icon-label">{{ t "entry.external_link.label" }}</span></a>
                 </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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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();